/* ==========================================================================
   site.css — the document.

   THE REGISTER IS A PRODUCT PAGE, not a paper. Centred compositions, a
   display serif with an italic accent clause, generous rounding, soft
   plates, and a lot of air. An earlier draft of this site was set as a
   nautical almanac — hairlines, dotted leaders, dense left-aligned tables —
   which was internally consistent, fully checked, and read as a journal
   article rather than as something you could use.

   THE GROUND IS A TINT AND THE PLATES ARE NEAR-WHITE. A bare `.band` is a
   spacer; a section that shows the ground puts its content on a `.plate`,
   which is what gives a page of tables and cards somewhere to sit.
   ========================================================================== */

/* ---- the bar ------------------------------------------------------------ */
.bar { position: sticky; top: 0; z-index: 40; padding: 0.7rem 0; }
.bar-in {
  display: flex; align-items: center; gap: 0.9rem;
  background: color-mix(in oklab, var(--sheet) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: var(--hair) solid color-mix(in oklab, var(--night) 10%, transparent);
  border-radius: 999px;
  padding: 0.45rem 0.5rem 0.45rem 1.1rem;
  box-shadow: 0 18px 40px -28px color-mix(in oklab, var(--night) 80%, transparent);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em;
}
.wordmark-mark { display: inline-flex; color: var(--acc); }
.bar-nav { margin-left: auto; display: flex; align-items: center; gap: 0.1rem; }
.bar-nav a, .bar-menu a {
  color: var(--ink-2); text-decoration: none;
  font-size: var(--step--1); font-weight: 520;
  padding: 0.45rem 0.7rem; border-radius: 999px; white-space: nowrap;
}
.bar-nav a:hover, .bar-menu a:hover { color: var(--ink); background: color-mix(in oklab, var(--night) 7%, transparent); }
.bar-nav a[aria-current='page'] { color: var(--ink); background: color-mix(in oklab, var(--night) 9%, transparent); }

/* Written at the same specificity as the plain link rule above, on purpose:
   `.bar-nav a` is two classes and an element, so a bare `.bar-cta` loses the
   cascade and renders as a dark label on a dark pill at 1.03:1. */
.btn.btn-primary { background: var(--acc); color: var(--sheet); border-color: transparent; }
.bar-nav a.bar-cta, .bar-menu a.bar-cta {
  background: var(--acc); color: var(--sheet); border: var(--hair) solid transparent;
  padding: 0.5rem 1rem; font-weight: 600;
}
.bar-nav a.bar-cta:hover, .bar-menu a.bar-cta:hover, .btn.btn-primary:hover { background: var(--ink); color: var(--sheet); }

.bar-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; }
.bar-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; }
.bar-menu { display: none; }
@media (max-width: 64rem) {
  .bar-nav { display: none; }
  .bar-toggle { display: block; margin-left: auto; }
  .bar-menu[hidden] { display: none; }
  .bar-menu:not([hidden]) {
    display: flex; flex-direction: column; gap: 0.15rem;
    margin: 0.6rem var(--gutter) 0; background: var(--sheet);
    border: var(--hair) solid var(--rule); border-radius: var(--radius-lg); padding: 0.6rem;
  }
  .bar-menu a { padding: 0.7rem 0.9rem; }
  .bar-menu .bar-cta { text-align: center; margin-top: 0.4rem; }
}

/* ---- the hero ----------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.hero-in {
  display: flex; justify-content: center;
  padding: clamp(3.5rem, 10vw, 8rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}
.glass {
  width: min(46rem, 100%);
  text-align: center;
  background: color-mix(in oklab, var(--sheet) 94%, transparent);
  border: var(--hair) solid color-mix(in oklab, var(--sheet-hi) 60%, transparent);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 3rem);
  color: var(--ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px -50px color-mix(in oklab, var(--night) 90%, transparent);
}
.glass h1 {
  font-size: clamp(3rem, 9vw, 5.4rem); font-weight: 380; letter-spacing: -0.028em;
  margin: 1.2rem 0 0.9rem; line-height: 0.98;
}
.glass h1 em { color: var(--acc); font-style: italic; }
.hero-lede { font-size: var(--step-1); color: var(--ink-2); margin: 0 auto 1.8rem; max-width: 34rem; }
.hero-read {
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3);
  border-top: var(--hair) solid var(--rule); padding-top: 0.9rem; margin: 1.6rem 0 0;
}
.hero-read b { color: var(--ink-2); font-weight: 600; }

.tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); font-weight: 560; color: var(--ink-2); text-decoration: none;
  background: color-mix(in oklab, var(--sheet-hi) 70%, transparent);
  border: var(--hair) solid var(--rule); border-radius: 999px; padding: 0.4rem 0.95rem;
}
a.tag:hover { color: var(--ink); border-color: var(--ink-3); }
.tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: inherit; font-size: var(--step-0); font-weight: 580;
  text-decoration: none; cursor: pointer;
  padding: 0.8rem 1.5rem; border-radius: 999px;
  border: var(--hair) solid var(--rule); color: var(--ink);
  background: color-mix(in oklab, var(--sheet-hi) 80%, transparent);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--step--1); color: var(--ink-2);
  background: color-mix(in oklab, var(--sheet-hi) 65%, transparent);
  border: var(--hair) solid var(--rule); border-radius: 999px; padding: 0.4rem 0.9rem;
}
.chip b { color: var(--ink); font-weight: 600; }
.chip-btn { cursor: pointer; font-family: var(--mono); }
.chip-btn:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---- the ticker strip --------------------------------------------------- */
.strip { background: var(--sheet-hi); color: var(--ink-2); padding: 1.1rem 0; }
.strip-in {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.6rem 1.8rem; font-size: var(--step--1); text-align: center;
}
.strip-in b { color: var(--ink); font-weight: 620; }
.strip-in span { display: inline-flex; align-items: center; gap: 0.4rem; }
.strip-in span + span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--acc); opacity: 0.55; margin-right: 1.2rem;
}

/* ---- bands -------------------------------------------------------------- */
.band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.band-sheet { background: var(--sheet); color: var(--ink); }
.band-sheet a { color: var(--acc); }
.band-plate { padding: clamp(1.4rem, 3.5vw, 2.6rem) 0; }
.band-plate > .shell > .plate, .band-plate > .plate {
  background: var(--sheet); color: var(--ink);
  border-radius: var(--radius-xl);
  padding: clamp(2.2rem, 6vw, 4.5rem) clamp(1.4rem, 4vw, 3.5rem);
}
.band-plate a { color: var(--acc); }

/* A dark band has to override every ink token it inherits. */
.band-night { background: var(--night); color: var(--lume); }
.band-night h1, .band-night h2, .band-night h3, .band-night h4 { color: var(--lume); }
.band-night p, .band-night .lede, .band-night .muted { color: var(--lume-2); }
.band-night .muted { color: var(--lume-3); }
.band-night a { color: var(--acc-n); }
.band-night em { color: var(--acc-n); }
.band-night .kicker { color: var(--lume-3); }
/* THE HEAD RULES ARE TWO CLASSES DEEP, so `.band-night p` at the same
   specificity loses on source order and every centred lede on a dark band
   renders in the light-surface ink at 2.1:1. The same for the accent em,
   where `.head h2 em` beats a bare `.band-night em`. */
.band-night .head p { color: var(--lume-2); }
.band-night .head h2, .band-night .head h2 em { color: var(--lume); }
.band-night .head h2 em { color: var(--acc-n); }
.band-night .head .kicker { color: var(--lume-3); }
.band-night .card p, .band-night .card .muted { color: var(--lume-2); }
.band-night .card .ticks li { color: var(--lume-2); }
.band-night b, .band-night strong { color: var(--lume); }
.band-night .card { background: color-mix(in oklab, var(--sheet) 8%, transparent); border-color: var(--rule-night); color: var(--lume); }
.band-night .card h3, .band-night .card h4 { color: var(--lume); }
.band-night .btn { color: var(--lume); border-color: var(--rule-night); background: color-mix(in oklab, var(--sheet) 8%, transparent); }
.band-night .btn.btn-primary { background: var(--acc-n); color: var(--night); border-color: transparent; }
.band-night .btn.btn-primary:hover { background: var(--lume); color: var(--night); }
.band-night th { color: var(--lume-3); border-color: var(--rule-night); }
.band-night td { color: var(--lume-2); border-color: var(--rule-night); }
.band-night td b { color: var(--lume); }
.band-night caption { color: var(--lume-3); }
.band-night code, .band-night .mono { color: var(--lume-2); }
.band-night .icon { background: color-mix(in oklab, var(--sheet) 12%, transparent); color: var(--acc-n); }
.band-night .tick { color: var(--acc-n); }

/* ---- centred section openings ------------------------------------------- */
.head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 5vw, 3.4rem); }
.kicker {
  font-size: 0.76rem; font-weight: 640; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 1rem;
}
.head h2 { font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 400; letter-spacing: -0.022em; margin: 0 0 1rem; }
.head h2 em { color: var(--acc); font-style: italic; }
.head p { font-size: var(--step-1); color: var(--ink-2); margin: 0; }
.lede { font-size: var(--step-1); color: var(--ink-2); }
.muted { font-size: var(--step--1); color: var(--ink-3); }
.mt0 { margin-top: 0; }

/* ---- cards -------------------------------------------------------------- */
.grid { display: grid; gap: 1.4rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.card {
  background: var(--sheet-hi); color: var(--ink);
  border: var(--hair) solid color-mix(in oklab, var(--night) 7%, transparent);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem);
}
.card h3 { font-family: var(--display); font-weight: 460; font-size: var(--step-2); margin: 0 0 0.7rem; letter-spacing: -0.012em; }
.card h4 { margin: 0 0 0.5rem; }
.card p { margin: 0 0 0.8rem; }
.card p:last-child { margin-bottom: 0; }
.card-stat { display: block; font-family: var(--display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 400; line-height: 1; margin-bottom: 0.6rem; letter-spacing: -0.02em; }

.icon {
  width: 2.6rem; height: 2.6rem; border-radius: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--acc) 12%, var(--sheet));
  color: var(--acc); margin-bottom: 1.1rem;
}
.icon svg { width: 1.25rem; height: 1.25rem; }

/* ---- tick lists --------------------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.7rem; }
.ticks li { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.7rem; align-items: start; font-size: var(--step--1); color: var(--ink-2); }
.tick { color: var(--acc); line-height: 1.5; }
.cross { color: var(--acc-3); line-height: 1.5; }
.dot::before { content: '•'; color: var(--acc); }

/* ---- steps -------------------------------------------------------------- */
.steps { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.step { background: var(--sheet-hi); border-radius: var(--radius-lg); padding: 1.5rem; }
.step-n {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--acc);
  letter-spacing: 0.1em; display: block; margin-bottom: 0.8rem;
}
.step h4 { font-family: var(--display); font-weight: 480; font-size: var(--step-1); margin: 0 0 0.5rem; }
.step p { font-size: var(--step--1); color: var(--ink-2); margin: 0 0 0.6rem; }
.step p:last-child { margin-bottom: 0; }

/* ---- tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 1.6rem 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
caption { text-align: left; color: var(--ink-3); font-size: var(--step--1); padding-bottom: 0.8rem; max-width: 50rem; }
th {
  text-align: left; font-weight: 620; color: var(--ink-3); font-size: 0.76rem;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  padding: 0 0.8rem 0.7rem 0; border-bottom: var(--hair) solid var(--rule);
}
td { padding: 0.65rem 0.8rem 0.65rem 0; border-bottom: var(--hair) solid color-mix(in oklab, var(--rule) 45%, transparent); vertical-align: baseline; }
td:last-child, th:last-child { padding-right: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 0.92em; }
tr:last-child td { border-bottom: 0; }

.leader { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.5rem 0; font-size: var(--step--1); border-bottom: var(--hair) solid color-mix(in oklab, var(--rule) 40%, transparent); }
.leader:last-child { border-bottom: 0; }
.leader > span:first-child { color: var(--ink-3); }
.leader > span:last-child { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---- the app ------------------------------------------------------------ */
.app-wallet { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; margin: 1.6rem 0 0.9rem; }
.status { text-align: center; font-size: var(--step--1); color: var(--ink-3); min-height: 1.5em; margin: 0; }
.status[data-state='bad'] { color: var(--acc-3); }
/* A result that is real but incomplete. Not an error — the scan answered,
   over less of the window than it was asked for, and says so. */
.status[data-state='warn'] { color: var(--acc-2); }
.status a { color: inherit; }

.mkt-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.mkt {
  display: grid; gap: 0.15rem; text-align: left; cursor: pointer; font: inherit;
  background: var(--sheet-hi); border: 2px solid transparent; border-radius: var(--radius-lg);
  padding: 0.9rem 1rem; color: var(--ink); transition: border-color .15s ease, transform .15s ease;
}
.mkt:hover { transform: translateY(-2px); }
.mkt.on { border-color: var(--acc); }
.mkt-tick { font-family: var(--display); font-size: var(--step-1); font-weight: 500; }
.mkt-name { font-size: 0.74rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-px { font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 0.35rem; }
.mkt-px em { font-style: normal; color: var(--ink-3); font-weight: 400; }
.mkt-fee { font-size: 0.72rem; color: var(--ink-3); }

.deploy, .vault { background: var(--sheet-hi); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.deploy-head, .vault-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1.2rem; }
.deploy-head h3, .vault-head h3 { font-family: var(--display); font-weight: 460; font-size: var(--step-2); margin: 0.2rem 0 0.2rem; }
.vault-nav { text-align: right; }
.vault-nav b { display: block; font-family: var(--display); font-size: var(--step-2); font-weight: 400; }
.vault-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin: 1.4rem 0; }
.stat { display: grid; gap: 0.15rem; }
.stat b { font-family: var(--display); font-size: var(--step-1); font-weight: 500; }
.acts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: 1.6rem; }
.act { background: var(--sheet); border-radius: var(--radius); padding: 1.2rem; }
.act h4 { margin: 0 0 0.7rem; font-size: var(--step-0); }
.act p { margin: 0; }

.field { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
.field input, select {
  flex: 1 1 9rem; min-width: 0; font: inherit; font-size: var(--step--1);
  padding: 0.65rem 0.9rem; border-radius: 999px;
  border: var(--hair) solid var(--rule); background: var(--sheet-hi); color: var(--ink);
}
.act .field input { background: var(--sheet-hi); }
.field input::placeholder { color: var(--ink-3); }
.field .btn { flex: 0 0 auto; padding: 0.65rem 1.1rem; font-size: var(--step--1); }

/* ---- footer ------------------------------------------------------------- */
.foot { background: var(--night); color: var(--lume-2); padding: 4rem 0 2.5rem; }
.foot .muted, .foot p { color: var(--lume-3); }
.foot h4 { color: var(--lume-3); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; }
.foot a { color: var(--lume-2); text-decoration: none; }
.foot a:hover { color: var(--lume); }
.foot .wordmark { color: var(--lume); }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: var(--step--1); }
.foot-base {
  margin-top: 3rem; padding-top: 1.6rem; border-top: var(--hair) solid var(--rule-night);
  font-size: var(--step--1); color: var(--lume-3);
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; justify-content: space-between;
}

/* ---- measure ------------------------------------------------------------ */
.plate > p, .plate > ol, .plate > ul,
.band-sheet > .shell > p, .band-night > .shell > p { max-width: 46rem; }
.center-measure { max-width: 44rem; margin-inline: auto; }
.pill {
  display: inline-block; font-family: var(--mono); font-size: 0.84em;
  padding: 0.12rem 0.5rem; border-radius: 6px;
  background: color-mix(in oklab, var(--night) 8%, transparent);
}
.band-night .pill { background: color-mix(in oklab, var(--sheet) 12%, transparent); }

/* A pool from a factory most markets do not use. Not an error — a fact the
   reader is entitled to before they sign, since the Vernier trusts whatever
   code that factory deployed. */
.warn-inline { color: var(--acc-3); font-weight: 640; }

.band-night .warn-inline, .deploy .warn-inline { color: var(--acc-n-3); }

/* The app's empty state. A panel with one grey sentence in it tells a reader
   nothing about whether the thing works; this says what will appear and what
   it will let them do, before they have connected anything. */
.empty { padding: 0.4rem 0 0.2rem; }
.empty-lede { font-family: var(--serif); font-size: var(--step-2); margin: 0 0 0.4rem; }
.empty-grid {
  display: grid; gap: 1rem 1.6rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.empty-grid div { display: flex; flex-direction: column; gap: 0.25rem; }
.empty-grid b { font-size: var(--step--1); letter-spacing: 0.01em; }
.empty-grid span { font-size: var(--step--1); line-height: 1.5; }