/* =========================================================================
   Gapper — design system
   Light-first: this is read by people who read brokerage statements, not
   by people who read dark-mode dashboards. Dark theme is designed, not flipped.
   ========================================================================= */

:root{
  /* Warm paper, not cream. Neutrals carry a slight blue bias toward the accent. */
  --paper:#fbfaf9;
  --paper-2:#f3f2ef;
  --paper-3:#eceae6;
  --ink:#15171c;
  --ink-2:#454b55;
  --ink-3:#78808c;
  --rule:#e2e0da;
  --rule-2:#d3d0c8;

  --accent:#7a2fd0;          /* 6.4:1 on paper — safe for text and links */
  --accent-bright:#8f44df;   /* the reference violet — mark, fills, curve */
  --accent-soft:rgba(143,68,223,.10);

  /* Semantic, and never used as brand colour. */
  --gain:#0b7a53;
  --loss:#c22e2e;
  --closed:#a55a09;         /* market shut — the one thing amber means here */
  --closed-soft:rgba(165,90,9,.10);

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1180px;
  --radius:10px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0c0a11;
    --paper-2:#14111e;
    --paper-3:#1c1729;
    --ink:#f0edf6;
    --ink-2:#b9b3c6;
    --ink-3:#827b93;
    --rule:#241e33;
    --rule-2:#332b45;
    --accent:#b071ee;        /* 5.8:1 on the dark ground */
    --accent-bright:#b565e6;
    --accent-soft:rgba(176,113,238,.14);
    --gain:#3ecf95;
    --loss:#ff6f6f;
    --closed:#f0a44b;
    --closed-soft:rgba(240,164,75,.13);
  }
}
:root[data-theme="dark"]{
  --paper:#0c0a11; --paper-2:#14111e; --paper-3:#1c1729;
  --ink:#f0edf6; --ink-2:#b9b3c6; --ink-3:#827b93;
  --rule:#241e33; --rule-2:#332b45;
  --accent:#b071ee; --accent-bright:#b565e6; --accent-soft:rgba(176,113,238,.14);
  --gain:#3ecf95; --loss:#ff6f6f;
  --closed:#f0a44b; --closed-soft:rgba(240,164,75,.13);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.gain{color:var(--gain)}
.loss{color:var(--loss)}
.muted{color:var(--ink-3)}

/* ---------- notice ---------- */
.notice{
  background:var(--closed-soft);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--closed);padding:.5rem 0;
}
.notice .wrap{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.notice b{color:var(--ink-2);font-weight:500}

.notice--info{background:var(--accent-soft);color:var(--accent);border-bottom-color:var(--rule)}
.notice--info b{color:var(--ink-2)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead .wrap{display:flex;align-items:center;gap:1.6rem;min-height:64px;flex-wrap:wrap}
.wordmark{
  display:flex;align-items:center;gap:.6rem;color:var(--ink);
  font-family:var(--display);font-size:1.42rem;letter-spacing:-.01em;line-height:1;white-space:nowrap;
}
/* Two price levels, offset — a gap on a chart — with the accent occupying the
   space between them. Off-chain that space is empty because the exchange is
   shut; here it is full, which is the whole argument of the site. The blocks
   take currentColor, so the mark needs no dark-theme variant of its own. */
.mark{width:31px;height:31px;flex:none;color:var(--ink)}
.mark .m-ink{fill:currentColor}
.mark .m-acc{fill:var(--accent-bright)}
/* The glow belongs to the lit bar alone. Spread across the ink blocks it turns
   the mark to mud, and on paper it reads as a printing fault, so it is spent
   only where it works. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mark .m-acc{filter:drop-shadow(0 0 6px rgba(176,113,238,.6))}
}
:root[data-theme="dark"] .mark .m-acc{filter:drop-shadow(0 0 6px rgba(176,113,238,.6))}
.masthead nav{display:flex;gap:1.25rem;font-size:.87rem;color:var(--ink-3)}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.masthead__right{margin-left:auto;display:flex;align-items:center;gap:1rem}

/* Market state — the product's signature fact, so it gets real estate. */
.market{
  display:flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:999px;padding:.28rem .7rem;white-space:nowrap;
}
.market__dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.market.is-open{color:var(--gain);border-color:color-mix(in srgb,var(--gain) 34%,transparent)}
.market.is-open .market__dot{background:var(--gain)}
.market.is-closed{color:var(--closed);border-color:color-mix(in srgb,var(--closed) 34%,transparent);background:var(--closed-soft)}
.market.is-closed .market__dot{background:var(--closed)}

/* ---------- page head ---------- */
.pagehead{padding:2.4rem 0 1.5rem;border-bottom:1px solid var(--rule)}
.pagehead h1{font-family:var(--display);font-size:clamp(2rem,4.5vw,2.9rem);line-height:1.05;letter-spacing:-.015em}
.pagehead__sub{color:var(--ink-2);margin:.5rem 0 0;max-width:62ch}
.season{
  display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.3rem;
  font-family:var(--mono);font-size:.78rem;color:var(--ink-3);
}
.season b{display:block;color:var(--ink);font-size:1.02rem;font-weight:500;letter-spacing:-.01em}

/* ---------- filters ---------- */
.filters{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:1.1rem 0}
.seg{display:flex;border:1px solid var(--rule-2);border-radius:8px;overflow:hidden}
.seg button{
  font:inherit;font-size:.82rem;background:transparent;border:0;color:var(--ink-3);
  padding:.38rem .85rem;cursor:pointer;border-right:1px solid var(--rule);
}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink)}
.search{
  margin-left:auto;font:inherit;font-size:.85rem;padding:.4rem .75rem;
  border:1px solid var(--rule-2);border-radius:8px;background:var(--paper);color:var(--ink);min-width:14rem;
}
.search::placeholder{color:var(--ink-3)}

/* Sixty stock tokens will not fit in a segmented control, so the board picker
   is a native select — it also gives keyboard and mobile behaviour for free. */
.picker{display:flex;align-items:center;gap:.5rem}
.picker__label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.picker select{
  font:inherit;font-size:.82rem;padding:.38rem 2rem .38rem .75rem;
  border:1px solid var(--rule-2);border-radius:8px;
  background:var(--paper);color:var(--ink);cursor:pointer;
  /* The native arrow is drawn in the platform's own colour, which reads as a
     foreign object on the dark theme. This one takes the theme's ink. */
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.picker select:hover{border-color:var(--accent)}
.picker[hidden]{display:none}

/* What the board on screen is actually ranking. A filtered board that looks
   like the unfiltered one is how a reader misreads a number. */
.boardnote{
  margin:0 0 .9rem;font-size:.82rem;color:var(--ink-2);max-width:70ch;
  border-left:2px solid var(--accent);padding-left:.75rem;
}

/* ---------- underlying chips ---------- */
.quotes{display:flex;gap:.4rem;flex-wrap:wrap;padding:1.1rem 0 .3rem}
.quote-chip{
  font:inherit;font-size:.8rem;font-family:var(--mono);display:flex;align-items:center;gap:.4rem;
  background:transparent;border:1px solid var(--rule-2);color:var(--ink-2);
  border-radius:999px;padding:.26rem .7rem;cursor:pointer;
}
.quote-chip:hover{border-color:var(--accent);color:var(--ink)}
.quote-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.quote-chip__n{color:var(--ink-3);font-size:.72rem}
.quote-chip[aria-pressed="true"] .quote-chip__n{color:var(--accent)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
table{width:100%;border-collapse:collapse;min-width:840px}
th{
  text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
  padding:.7rem .8rem;border-bottom:1px solid var(--rule);background:var(--paper-2);
  position:sticky;top:0;
}
th.num{text-align:right}
td{padding:.72rem .8rem;border-bottom:1px solid var(--rule);font-size:.88rem;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--paper-2)}

.rank{font-family:var(--mono);color:var(--ink-3);width:3.4rem}
.rank--top{color:var(--ink);font-weight:700}
.who{display:flex;align-items:center;gap:.65rem;min-width:0}
.chip{
  width:30px;height:30px;border-radius:7px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:.68rem;font-weight:700;color:#fff;letter-spacing:.02em;
}
.who__name{font-weight:600;letter-spacing:-.005em}
.who__name--addr{font-family:var(--mono);font-size:.82rem;font-weight:500;color:var(--ink-2)}
.chip--anon{background:var(--paper-3);border:1px dashed var(--rule-2)}
.who__claim{color:var(--accent);opacity:.85}
.who__addr{font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}
.pair{font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.spark{display:block;width:78px;height:24px}

.closed{display:flex;align-items:center;gap:.55rem;justify-content:flex-end}
.closed__v{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);width:2.4rem;text-align:right}
.bar{position:relative;height:6px;border-radius:3px;background:var(--paper-3);width:58px;flex:none}
.bar span{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--accent-bright);opacity:.8}

/* ---------- profile ---------- */
.ident{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;padding:2rem 0 1.4rem}
.ident .chip{width:60px;height:60px;border-radius:12px;font-size:1.15rem}
.ident h1{font-family:var(--display);font-size:2.2rem;line-height:1.1;letter-spacing:-.015em}
.ident__meta{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);margin-top:.3rem}
.btn{
  font:inherit;font-size:.85rem;font-weight:600;border-radius:8px;padding:.5rem 1rem;
  border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;
}
.btn--ghost{background:transparent;color:var(--ink-2);border-color:var(--rule-2)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
.stat{padding:1rem 1.15rem;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat__k{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stat__v{font-family:var(--mono);font-size:1.5rem;font-weight:500;line-height:1.3;margin-top:.25rem;letter-spacing:-.02em}
.stat__s{font-size:.76rem;color:var(--ink-3);margin-top:.1rem}

section{margin-top:2rem}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem;flex-wrap:wrap}
h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sec-note{font-size:.78rem;color:var(--ink-3)}
.panel{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);padding:1.2rem}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem;align-items:start}

.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.grid-line{stroke:var(--rule);stroke-width:1}
.axis{fill:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:11px}
.tip{
  position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
  background:var(--ink);color:var(--paper);border-radius:7px;padding:.4rem .6rem;
  font-family:var(--mono);font-size:.72rem;white-space:nowrap;transition:opacity .12s;
}
.tip b{display:block;opacity:.65;font-weight:400;font-size:.66rem}

.bars{display:flex;flex-direction:column;gap:.55rem}
.bar-row{display:grid;grid-template-columns:52px 1fr 88px;align-items:center;gap:.7rem}
.bar-row__t{font-family:var(--mono);font-size:.79rem}
.track{position:relative;height:10px;border-radius:3px;background:var(--paper-3)}
.zero{position:absolute;top:-3px;bottom:-3px;left:9.7%;width:1px;background:var(--rule-2)}
.fill{position:absolute;top:0;bottom:0}
.fill--pos{left:9.7%;background:var(--accent-bright);border-radius:2px 4px 4px 2px}
.fill--neg{right:90.3%;background:var(--loss);border-radius:4px 2px 2px 4px}

dl.edge{margin:0;display:flex;flex-direction:column}
dl.edge>div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--rule)}
dl.edge>div:last-child{border-bottom:0}
dl.edge dt{color:var(--ink-2);font-size:.83rem}
dl.edge dd{margin:0;font-family:var(--mono);font-size:.83rem;font-variant-numeric:tabular-nums}

.tag{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--rule-2);border-radius:4px;padding:.06rem .36rem;color:var(--ink-3);white-space:nowrap;
}
.tag--closed{color:var(--closed);border-color:color-mix(in srgb,var(--closed) 34%,transparent);background:var(--closed-soft)}
.tx{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);border-bottom:1px dotted var(--rule-2)}
.tx:hover{color:var(--accent)}

/* ---------- follow ---------- */
.follow__panel{margin-bottom:1rem;max-width:660px}
.follow__box{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.follow__note{margin:0;font-size:.8rem;color:var(--ink-3);max-width:56ch}

/* ---------- claim ---------- */
.steps{display:flex;gap:1.4rem;list-style:none;margin:0 0 1.2rem;padding:0;flex-wrap:wrap}
.steps__i{display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--ink-3)}
.steps__n{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-size:.7rem;border:1px solid var(--rule-2);
}
.steps__i.is-now{color:var(--ink);font-weight:600}
.steps__i.is-now .steps__n{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.steps__i.is-done .steps__n{background:var(--accent-bright);border-color:var(--accent-bright);color:#fff}
.claim__panel{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;max-width:660px}
.claim__h{font-family:var(--display);font-size:1.5rem;letter-spacing:-.01em}
.claim__p{margin:0;color:var(--ink-2);font-size:.9rem;max-width:60ch}
.claim__input{margin-left:0;min-width:min(100%,18rem);font-family:var(--mono)}
.claim__msg{
  margin:0;width:100%;overflow-x:auto;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:8px;padding:.85rem 1rem;font-family:var(--mono);font-size:.76rem;
  line-height:1.6;color:var(--ink-2);white-space:pre-wrap;word-break:break-word;
}
.alert{
  margin:0 0 1rem;border:1px solid color-mix(in srgb,var(--loss) 40%,transparent);
  background:color-mix(in srgb,var(--loss) 8%,transparent);color:var(--loss);
  border-radius:8px;padding:.6rem .85rem;font-size:.86rem;max-width:660px;
}

/* ---------- method ---------- */
.method{margin:2.2rem 0 3rem;border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1.15rem}
.method h2{margin-bottom:.5rem}
.method p{margin:0 0 .55rem;color:var(--ink-2);font-size:.86rem;max-width:66ch}
.method p:last-child{margin-bottom:0}
.method code{font-family:var(--mono);font-size:.8rem;color:var(--accent)}

footer{border-top:1px solid var(--rule);margin-top:3rem;padding:1.5rem 0 2.5rem;color:var(--ink-3);font-size:.8rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (max-width:860px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--rule)}
  .two{grid-template-columns:1fr}
  .ident{grid-template-columns:auto 1fr}
  .ident__actions{grid-column:1/-1}
  .search{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* The issuer's own tokenized equity, against a token that merely borrowed the
   ticker. Identified by contract bytecode, so this is a claim the site can
   stand behind rather than a curated list. */
.pair .issued{margin-left:.35rem;color:var(--accent);font-size:.8em}
.pair .imposter{
  margin-left:.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;
  color:var(--closed);border:1px solid color-mix(in srgb,var(--closed) 40%,transparent);
  border-radius:2px;padding:0 .28rem;white-space:nowrap;
}