@import url("/tokens.css");

/* HERON scoreboard.
 *
 * A dashboard is operated, not read, so the craft moves from typography to information
 * design: the summary sits above the detail, and state is carried by form (a chip, a
 * stripe, a bar) as well as by number, so what needs attention reads at a glance.
 *
 * Still the same Auros system as the landing page and the docs — four surface levels of
 * one hue, no shadows anywhere, weights 400 and 500 only, exactly two radii, accent
 * rationed to actions and state, phosphor on nothing but large statistics. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--silver);
  font-family: "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  font-size: var(--t-body); font-weight: var(--w-regular); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ── type ─────────────────────────────────────────────────────────── */
.caption {
  display: block; font-size: var(--t-caption); font-weight: var(--w-medium);
  line-height: var(--lh-caption); letter-spacing: var(--tr-caption);
  text-transform: uppercase; color: var(--mist);
}
.label {
  display: block; font-size: var(--t-label); font-weight: var(--w-medium);
  line-height: var(--lh-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--silver);
}
.label.accent, .caption.accent { color: var(--mint); }
.body { margin: 0; color: var(--silver); }
.body.small { font-size: 13px; color: var(--steel); }
.body.mist { color: var(--mist); }
.subheading {
  font-size: var(--t-subheading); font-weight: var(--w-regular);
  line-height: var(--lh-subheading); letter-spacing: var(--tr-subheading);
  color: var(--white); margin: 0;
}
.heading {
  font-size: var(--t-heading); font-weight: var(--w-medium); line-height: var(--lh-tight);
  color: var(--white); margin: var(--s-20) 0 var(--s-16); text-wrap: balance;
}

/* ── navigation ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20; height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-32);
  padding: 0 var(--s-40); background: var(--canvas);
  border-bottom: 1px solid var(--rule);
}
.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-links { display: flex; gap: var(--s-28); margin-left: auto; }
.nav-links a {
  font-size: var(--t-nav); font-weight: var(--w-medium); letter-spacing: var(--tr-nav);
  text-transform: uppercase; color: var(--silver); text-decoration: none;
  transition: color .18s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--white); }
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: var(--r-small); border: 0;
  background: var(--grad-bio); color: #06212C;
  font-family: inherit; font-size: var(--t-nav); font-weight: var(--w-medium);
  letter-spacing: var(--tr-nav); text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: filter .18s ease;
}
.cta:hover { filter: brightness(1.08); }
.cta.ghost {
  background: var(--shoal); color: var(--mist); border: 1px solid var(--rule);
}
.cta.ghost:hover { border-color: var(--slate); filter: none; }

/* ── layout ───────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--s-40); }
.page-head { padding: var(--s-64) 0 var(--s-40); }
section { padding-bottom: var(--s-64); }
.sec-head {
  display: flex; align-items: baseline; gap: var(--s-20);
  flex-wrap: wrap; margin-bottom: var(--s-24);
}
.sec-head .subheading { margin-right: auto; }

/* ── Surface Card ─────────────────────────────────────────────────── */
.card {
  background: var(--shoal); border: 1px solid var(--rule);
  border-radius: var(--r-card); padding: var(--card-pad);
}
.card.recessed { background: var(--abyss); }

/* ── Statistic tiles — the summary layer ──────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-20); }
.tile {
  background: var(--shoal); border: 1px solid var(--rule);
  border-radius: var(--r-card); padding: 28px var(--s-28) var(--s-24);
  display: flex; flex-direction: column; gap: 6px;
  /* the stripe is the state channel — colour is never the only carrier, the
     sub-line always says the same thing in words */
  border-left: 2px solid var(--slate);
}
.tile[data-state="good"]    { border-left-color: var(--mint); }
.tile[data-state="bad"]     { border-left-color: var(--coral); }
.tile[data-state="waiting"] { border-left-color: var(--slate); }
.tile-n {
  font-size: 52px; font-weight: var(--w-medium); line-height: 1;
  letter-spacing: var(--tr-stat); color: var(--phosphor);
}
.tile-n.pending { color: var(--steel); }
.tile-l {
  font-size: var(--t-stat-label); font-weight: var(--w-medium);
  letter-spacing: var(--tr-stat-label); text-transform: uppercase; color: var(--mist);
}
.tile-sub { font-size: 13px; color: var(--steel); line-height: 1.45; margin: 0; }

/* ── maturation bar: the ledger filling up ────────────────────────── */
.mat { display: flex; height: 10px; border-radius: var(--r-small); overflow: hidden; background: var(--abyss); }
.mat > i { display: block; height: 100%; transition: width .5s cubic-bezier(.2,0,0,1); }
.mat > i.settled { background: var(--mint); }
.mat > i.pending { background: var(--amber); }
.mat > i.open    { background: var(--slate); }
.mat-key { display: flex; gap: var(--s-24); flex-wrap: wrap; margin-top: 14px; }
.mat-key span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--steel); }
.mat-key i { width: 9px; height: 9px; display: block; }  /* square: the vocabulary is 6px and 16px only, and neither suits a 9px key */

/* ── table ────────────────────────────────────────────────────────── */
.t-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: right; padding: 13px var(--s-16); border-bottom: 1px solid var(--rule-2); }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th {
  font-size: var(--t-caption); font-weight: var(--w-medium); letter-spacing: var(--tr-caption);
  text-transform: uppercase; color: var(--steel); border-bottom-color: var(--rule);
  white-space: nowrap;
}
td { font-size: var(--t-ui); color: var(--silver); }
td.pair { color: var(--mist); font-weight: var(--w-medium); }
tbody tr:hover { background: rgba(82,112,140,.10); }

.chip-v {
  display: inline-block; padding: 4px 9px; border-radius: var(--r-small);
  font-size: var(--t-caption); font-weight: var(--w-medium); letter-spacing: var(--tr-caption);
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor;
}
.chip-v[data-v="run"]      { color: var(--mint); }
.chip-v[data-v="spent"]    { color: var(--amber); }
.chip-v[data-v="blocked"]  { color: var(--coral); }
.chip-v[data-v="filtered"] { color: var(--steel); }

.held-y { color: var(--mint); }
.held-n { color: var(--coral); }
.held-w { color: var(--steel); }

/* filter chips */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 14px; border-radius: var(--r-small);
  background: transparent; border: 1px solid var(--rule); color: var(--silver);
  font-family: inherit; font-size: var(--t-nav); font-weight: var(--w-medium);
  letter-spacing: var(--tr-nav); text-transform: uppercase; cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.chip:hover { border-color: var(--slate); color: var(--mist); }
.chip[aria-pressed="true"] { background: var(--shoal); border-color: var(--mint); color: var(--mint); }

/* ── capture histogram ───────────────────────────────────────────── */
.hist { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.hist > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.hist i { display: block; border-radius: var(--r-small) var(--r-small) 0 0; background: var(--slate); transition: height .4s cubic-bezier(.2,0,0,1); }
.hist small { font-size: 10px; color: var(--steel); text-align: center; letter-spacing: .04em; }

/* ── wallet panel ────────────────────────────────────────────────── */
.w-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-20); margin-top: var(--s-24); }
.w-stat { display: flex; flex-direction: column; gap: 5px; }
.w-stat b { font-size: 30px; font-weight: var(--w-medium); letter-spacing: -.02em; color: var(--phosphor); line-height: 1; }
.w-stat small {
  font-size: var(--t-caption); font-weight: var(--w-medium); letter-spacing: var(--tr-caption);
  text-transform: uppercase; color: var(--steel);
}
.pos-list { display: flex; flex-direction: column; gap: 12px; margin-top: var(--s-28); }
.pos {
  display: flex; align-items: center; gap: var(--s-20); flex-wrap: wrap;
  background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--r-small);
  padding: 18px var(--s-20);
  border-left: 2px solid var(--slate);
}
.pos[data-r="in"]  { border-left-color: var(--mint); }
.pos[data-r="out"] { border-left-color: var(--coral); }
.pos b { color: var(--mist); font-weight: var(--w-medium); }
.pos .grow { flex: 1; min-width: 130px; }
.pos dl { display: flex; gap: var(--s-24); margin: 0; flex-wrap: wrap; }
.pos dl div { display: flex; flex-direction: column; gap: 3px; }
.pos dt { font-size: 10px; letter-spacing: var(--tr-caption); text-transform: uppercase; color: var(--steel); }
.pos dd { margin: 0; font-size: var(--t-ui); color: var(--silver); }
.pos dd.up { color: var(--mint); } .pos dd.down { color: var(--coral); }


/* ── funnel ──────────────────────────────────────────────────────── */
.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.funnel li { display: flex; align-items: center; gap: var(--s-20); }
.funnel .f-l { flex: 0 0 210px; font-size: var(--t-ui); color: var(--silver); }
.f-bar { flex: 1; height: 8px; background: var(--abyss); border-radius: var(--r-small); overflow: hidden; }
.f-bar i { display: block; height: 100%; background: var(--grad-bio); transition: width .55s cubic-bezier(.2,0,0,1); }
.f-n { flex: 0 0 52px; text-align: right; font-size: var(--t-ui); color: var(--mist); }

/* ── empty / waiting state ───────────────────────────────────────── */
.waiting {
  display: flex; align-items: center; gap: var(--s-24); flex-wrap: wrap;
  padding: var(--s-28); background: var(--abyss);
  border: 1px dashed var(--rule); border-radius: var(--r-card);
}
.waiting svg { flex: 0 0 auto; }

footer.foot { border-top: 1px solid var(--rule); background: var(--abyss); padding: var(--s-48) 0; margin-top: var(--s-40); }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .tiles, .w-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 var(--s-20); }
  .nav { padding: 0 var(--s-20); gap: var(--s-16); }
  .nav-links { display: none; }
  .tiles, .w-grid { grid-template-columns: 1fr; }
  .heading { font-size: 30px; }
  .tile-n { font-size: 42px; }
  .funnel .f-l { flex: 0 0 130px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* the four leading characters of the pool address: several pools share a pair name and
   differ only by bin step, so the name alone is not an identity */
td.pair .addr {
  margin-left: 9px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--steel); letter-spacing: .04em;
}

#more {
  margin-top: var(--s-24); padding: 12px 20px; border-radius: var(--r-small);
  background: transparent; border: 1px solid var(--rule); color: var(--silver);
  font-family: inherit; font-size: var(--t-nav); font-weight: var(--w-medium);
  letter-spacing: var(--tr-nav); text-transform: uppercase; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
#more:hover { border-color: var(--slate); color: var(--mist); }

/* the definition panel is four equal statements, so it reads as 2x2 rather than three
   across with one orphan below */
.def-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px var(--s-48); margin-top: 22px; }
@media (max-width: 820px) { .def-grid { grid-template-columns: 1fr; } }