/* ==========================================================================
   PONJOH · app styles
   --------------------------------------------------------------------------
   theme.css owns the palette. This file owns the shell and the shared
   component vocabulary that every page module builds from, so the five pages
   look like one product without five agents editing one stylesheet.

   THE VOCABULARY (what a page module can rely on existing here):

     .product-page          page container, rhythm and max width
     .product-header        eyebrow + h1 + sub + .product-header-actions
     .eyebrow               mono uppercase micro label, accent
     .primary-action        the accent call to action
     .ghost-action          the outline call to action
     .metric-strip          stat band, set --metric-count on it
     .lens                  the one surface primitive, everything sits on one
       .lens-header         eyebrow row inside a lens
       .lens.is-ticked      adds the landing page corner ticks
     .directory-tools       search field plus [role="group"] toggle rails
     .empty-state           nothing to show yet
     .data-table            tabular data, mono numerals
     .badge .badge-ok|warn|bad|accent
     .field .input .select .textarea      form controls
     .note .note-warn .note-bad           callouts
     .kv                                  dt/dd rows
     .prose                               long form copy (Learn, Build)
     .stack .grid-2 .grid-3 .split        layout helpers
     .mono .muted .grad-text .num         text helpers
     .skeleton .toast .sheet              feedback, owned by the shell

   Anything a single page needs and nobody else does goes through
   ui.styles(id, css) instead of being added here.

   ON THE HEX LITERALS BELOW: every one is a theme token plus an alpha byte
   (#d4fc5029 is --accent at 16%), because a var() cannot be used inside a hex
   and glow/tint values need the alpha. theme.css sets the same precedent with
   --pf-btn-glow. No colour here originates outside the ponsfamily palette.
   ========================================================================== */

/* ── reset ──────────────────────────────────────────────────────────────── */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The topbar is sticky, so anything a page sticks or jumps to has to clear it.
   Page modules position their own sticky rails with top: var(--topbar-h). */
:root {
  --topbar-h: 64px;
}

[id] {
  scroll-margin-top: calc(var(--topbar-h) + var(--s4));
}

body {
  min-height: 100dvh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Icons are outline glyphs. :where() keeps the specificity at zero so a page
   stylesheet can override it without a fight. */
svg.icon,
.main svg:where(:not([class])) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.icon-spin,
.is-spinning {
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-control);
}

::selection {
  background: var(--accent);
  color: var(--pf-accent-contrast);
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--s4);
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-control);
  background: var(--accent);
  color: var(--pf-accent-contrast);
  font-family: var(--mono);
  font-size: 12px;
  transition: top var(--d-short) var(--ease);
}

.skip-link:focus {
  top: var(--s4);
}

.noscript {
  max-width: 42rem;
  margin: var(--s24) auto;
  padding: var(--s8);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--ink-raised);
  display: grid;
  gap: var(--s3);
}

.noscript a {
  color: var(--accent);
}

/* ── shell ──────────────────────────────────────────────────────────────── */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s6);
  height: var(--topbar-h);
  padding: 0 var(--s6);
  border-bottom: 1px solid var(--line);
  background: #0d0d0dd9;
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  transition: opacity var(--d-short) var(--ease);
}

.brand:hover {
  opacity: 0.82;
}

.brand-mark {
  flex: none;
  /* The mark is a PNG whose own field is the page colour, so a small radius is
     all that is needed to stop it reading as a pasted square against a header
     that is not quite the same tone. Harmless on the SVG fallback. */
  border-radius: 6px;
}

.brand-mark path {
  fill: currentColor;
  stroke: none;
}

.brand-mark circle {
  fill: none;
  stroke: currentColor;
}

.brand > span {
  white-space: nowrap;
  font-family: var(--geo);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  color: var(--paper);
}

.desktop-nav {
  display: flex;
  justify-self: center;
  align-items: center;
  gap: 2px;
}

.desktop-nav a {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  color: var(--muted);
  transition: color var(--d-short) var(--ease), background var(--d-short) var(--ease);
}

.desktop-nav a:hover {
  color: var(--paper);
  background: var(--line-soft);
}

.desktop-nav a[aria-current="page"] {
  color: var(--paper);
  background: var(--pf-accent-soft);
}

.desktop-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 18px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--accent);
}

.utilities {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 190px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-raised);
  color: var(--paper-36);
  transition: border-color var(--d-short) var(--ease), box-shadow var(--d-short) var(--ease);
}

.search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--pf-field-focus-glow);
  color: var(--accent);
}

.search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: 13px;
  color: var(--paper);
}

.search input::placeholder {
  color: var(--paper-36);
}

.search input::-webkit-search-cancel-button {
  display: none;
}

.net-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-raised);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}

.net-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper-36);
  flex: none;
}

.net-pill.is-live {
  color: var(--paper);
}

.net-pill.is-live .net-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px #d4fc5029;
}

.net-pill.is-probing .net-dot {
  animation: blink 1.1s ease-in-out infinite;
}

.net-pill.is-down {
  border-color: #ff453a3d;
  color: var(--muted);
}

.net-pill.is-down .net-dot {
  background: var(--bad);
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

.wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--ink-raised);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--paper);
  white-space: nowrap;
  transition: border-color var(--d-short) var(--ease), background var(--d-short) var(--ease),
    box-shadow var(--d-short) var(--ease);
}

.wallet-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--pf-btn-glow);
}

.wallet-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper-36);
  flex: none;
}

.wallet-btn.is-connected {
  border-color: #d4fc5052;
  background: var(--pf-accent-soft);
}

.wallet-btn.is-connected .wallet-dot {
  background: var(--accent);
}

.wallet-btn.is-warn {
  border-color: #ff453a5c;
  background: #ff453a17;
  color: var(--paper);
}

.wallet-balance {
  color: var(--muted);
}

.wallet-narrow,
.connect-narrow {
  display: none;
}

.main {
  flex: 1;
  width: 100%;
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line);
  padding: var(--s12) var(--s6) var(--s8);
  display: grid;
  gap: var(--s6);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
}

.footer-nav a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--d-short) var(--ease);
}

.footer-nav a:hover,
.footer-nav a[aria-current="page"] {
  color: var(--accent);
}

.risk {
  display: grid;
  gap: 8px;
  max-width: 74ch;
  padding: var(--s4) var(--s6);
  border-left: 2px solid var(--pf-accent-mid);
  background: #f2f2f208;
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
}

.risk strong {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-72);
}

.risk p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.footer .meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-36);
}

.footer .meta a:hover {
  color: var(--accent);
}

/* ── mobile dock ────────────────────────────────────────────────────────── */

.mobile-dock {
  display: none;
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #0d0d0deb;
  backdrop-filter: blur(14px);
}

.mobile-dock a {
  flex: 1;
  padding: 9px 4px;
  border-radius: var(--r-control);
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.mobile-dock a[aria-current="page"] {
  color: var(--accent);
  background: var(--pf-accent-soft);
}

/* ── page furniture ─────────────────────────────────────────────────────── */

.product-page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s8) var(--s6) var(--s18);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.product-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.product-header > div {
  display: grid;
  gap: 6px;
}

.product-header h1 {
  font-family: var(--geo);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.product-header p {
  font-size: 13.5px;
  color: var(--muted);
}

.product-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  padding-left: 0.34em;
}

/* ── actions ────────────────────────────────────────────────────────────── */

.primary-action,
.ghost-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px 0 20px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--d-short) var(--ease), box-shadow var(--d-short) var(--ease),
    border-color var(--d-short) var(--ease), color var(--d-short) var(--ease),
    opacity var(--d-short) var(--ease);
}

.primary-action {
  background: linear-gradient(96deg, var(--bright), var(--accent));
  color: var(--pf-accent-contrast);
  border: 1px solid transparent;
}

.primary-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--pf-btn-glow);
}

.ghost-action {
  border: 1px solid var(--line-strong);
  color: var(--paper);
}

.ghost-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.primary-action[disabled],
.ghost-action[disabled],
.primary-action[aria-disabled="true"] {
  opacity: 0.42;
  pointer-events: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-control);
  color: var(--muted);
  transition: color var(--d-short) var(--ease), background var(--d-short) var(--ease);
}

.icon-btn:hover {
  color: var(--paper);
  background: var(--line-soft);
}

/* ── metric strip ───────────────────────────────────────────────────────── */

.metric-strip {
  display: grid;
  grid-template-columns: repeat(var(--metric-count, 4), minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--ink-raised);
  overflow: hidden;
}

.metric-strip > div {
  display: grid;
  gap: 4px;
  padding: var(--s4) var(--s6);
  border-left: 1px solid var(--line);
}

.metric-strip > div:first-child {
  border-left: 0;
}

.metric-strip span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-36);
}

.metric-strip b {
  font-family: var(--geo);
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.metric-strip small {
  font-size: 11.5px;
  color: var(--muted);
}

/* ── lens: the one surface ──────────────────────────────────────────────── */

.lens {
  position: relative;
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--ink-raised);
  box-shadow: var(--glass-highlight);
}

.lens-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.lens-header > div {
  display: grid;
  gap: 4px;
}

.lens-header b {
  font-family: var(--geo);
  font-size: var(--step-1);
  font-weight: 300;
}

.lens h2 {
  font-family: var(--geo);
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.lens h3 {
  font-family: var(--geo);
  font-size: var(--step-1);
  font-weight: 400;
}

/* The landing page HUD ticks, for pages that want the harder edge. */
.lens.is-ticked::before,
.lens.is-ticked::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  pointer-events: none;
}

.lens.is-ticked::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  border-radius: var(--r-card) 0 0 0;
}

.lens.is-ticked::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  border-radius: 0 0 var(--r-card) 0;
}

/* ── directory tools ────────────────────────────────────────────────────── */

.directory-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.directory-tools > label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 260px;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--ink-raised);
  color: var(--paper-36);
  transition: border-color var(--d-short) var(--ease), box-shadow var(--d-short) var(--ease);
}

.directory-tools > label:focus-within {
  border-color: var(--accent);
  box-shadow: var(--pf-field-focus-glow);
  color: var(--accent);
}

.directory-tools > label input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: 13.5px;
  color: var(--paper);
}

.directory-tools > label input::placeholder {
  color: var(--paper-36);
}

.directory-tools [role="group"] {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-raised);
}

.directory-tools [role="group"] button {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--d-short) var(--ease), background var(--d-short) var(--ease);
}

.directory-tools [role="group"] button:hover {
  color: var(--paper);
}

.directory-tools [role="group"] button[aria-pressed="true"] {
  background: var(--pf-accent-soft);
  color: var(--accent);
}

/* ── empty and error states ─────────────────────────────────────────────── */

.empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: var(--s18) var(--s6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-panel);
  text-align: center;
  background: radial-gradient(ellipse at 50% 130%, #d4fc500f, transparent 68%);
}

.empty-state-icon {
  color: var(--accent);
  opacity: 0.7;
}

.empty-state b {
  font-family: var(--geo);
  font-size: var(--step-1);
  font-weight: 300;
}

.empty-state span {
  max-width: 46ch;
  font-size: 13.5px;
  color: var(--muted);
}

.empty-state .primary-action,
.empty-state .ghost-action {
  margin-top: 10px;
}

.route-error {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.route-error b {
  font-family: var(--geo);
  font-size: var(--step-2);
  font-weight: 300;
}

.route-error p {
  max-width: 70ch;
  font-size: 13.5px;
  color: var(--muted);
  font-family: var(--mono);
  word-break: break-word;
}

.route-loading {
  display: grid;
  gap: var(--s4);
}

/* ── tables ─────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-panel);
}

.data-table {
  min-width: 620px;
  font-size: 13.5px;
}

.data-table th {
  padding: 10px var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-36);
  white-space: nowrap;
}

.data-table td {
  padding: 14px var(--s3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background var(--d-short) var(--ease);
}

.data-table tbody tr:hover {
  background: #f2f2f207;
}

.data-table .num,
.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── badges and chips ───────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.badge-accent {
  border-color: #d4fc5052;
  background: var(--pf-accent-soft);
  color: var(--accent);
}

.badge-ok {
  border-color: #30d1584d;
  background: #30d1581a;
  color: var(--ok);
}

.badge-warn {
  border-color: #e8c14a4d;
  background: #e8c14a1a;
  color: var(--warn);
}

.badge-bad {
  border-color: #ff453a4d;
  background: #ff453a1a;
  color: var(--bad);
}

.addr-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.addr-copy,
.addr-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--r-control);
  font-size: 12px;
  color: var(--muted);
  transition: color var(--d-short) var(--ease), background var(--d-short) var(--ease);
}

.addr-copy:hover,
.addr-link:hover {
  color: var(--accent);
  background: var(--pf-accent-soft);
}

/* ── forms ──────────────────────────────────────────────────────────────── */

.field {
  display: grid;
  gap: 8px;
}

.field > label,
.field-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-36);
}

.field-hint {
  font-size: 12px;
  color: var(--muted);
}

.field-error {
  font-size: 12px;
  color: var(--bad);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--ink-soft);
  color: var(--paper);
  font-size: 14px;
  outline: none;
  transition: border-color var(--d-short) var(--ease), box-shadow var(--d-short) var(--ease);
}

.textarea {
  min-height: 110px;
  resize: vertical;
}

.select {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-56) 50%),
    linear-gradient(135deg, var(--paper-56) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 13px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--pf-field-focus-glow);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--paper-36);
}

.input[aria-invalid="true"] {
  border-color: var(--bad);
}

.form-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s4);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}

.form-header > div {
  display: grid;
  gap: 6px;
}

.form-header h2 {
  font-family: var(--geo);
  font-size: var(--step-2);
  font-weight: 300;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s6);
  margin-top: var(--s6);
  border-top: 1px solid var(--line);
}

/* ── notes and key/value rows ───────────────────────────────────────────── */

.note {
  display: grid;
  gap: 6px;
  padding: var(--s4) var(--s4) var(--s4) var(--s6);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
  background: var(--pf-accent-soft);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted-strong);
}

.note strong {
  font-weight: 500;
  color: var(--paper);
}

.note-warn {
  border-left-color: var(--warn);
  background: #e8c14a12;
}

.note-bad {
  border-left-color: var(--bad);
  background: #ff453a12;
}

.kv {
  display: grid;
  gap: 0;
}

.kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}

.kv > div:last-child {
  border-bottom: 0;
}

.kv dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-36);
}

.kv dd {
  font-size: 13.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── long form copy (Learn, Build) ──────────────────────────────────────── */

.prose {
  max-width: 74ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--muted-strong);
}

.prose > * + * {
  margin-top: var(--s4);
}

.prose h2 {
  font-family: var(--geo);
  font-size: var(--step-3);
  font-weight: 300;
  color: var(--paper);
  margin-top: var(--s8);
}

.prose h3 {
  font-family: var(--geo);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--paper);
  margin-top: var(--s6);
}

.prose strong {
  color: var(--paper);
  font-weight: 500;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #d4fc5052;
}

.prose a:hover {
  text-decoration-color: var(--accent);
}

.prose ul,
.prose ol {
  display: grid;
  gap: 8px;
  padding-left: var(--s4);
}

.prose li {
  position: relative;
  padding-left: var(--s4);
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.prose ol {
  counter-reset: step;
}

.prose ol li::before {
  counter-increment: step;
  content: counter(step);
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}

code,
.mono {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

.prose code,
.code-inline {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink-soft);
  font-size: 0.87em;
  color: var(--lime);
}

pre,
.code-block {
  overflow-x: auto;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--ink-deep);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--paper-72);
}

pre code,
.code-block code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* ── layout helpers ─────────────────────────────────────────────────────── */

.stack {
  display: grid;
  gap: var(--s4);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s4);
  align-items: start;
}

.muted {
  color: var(--muted);
}

.grad-text {
  background: linear-gradient(96deg, var(--bright), var(--leaf) 48%, var(--deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── skeleton ───────────────────────────────────────────────────────────── */

.skeleton {
  display: grid;
  gap: 10px;
}

.skeleton-row {
  display: block;
  height: 56px;
  border-radius: var(--r-panel);
  background: linear-gradient(100deg, #f2f2f20a 20%, #f2f2f214 42%, #f2f2f20a 64%);
  background-size: 260% 100%;
  animation: sweep 1.5s var(--ease) infinite;
}

@keyframes sweep {
  to {
    background-position: -260% 0;
  }
}

/* ── toasts ─────────────────────────────────────────────────────────────── */

.toast-stack {
  position: fixed;
  z-index: 80;
  right: var(--s6);
  bottom: var(--s6);
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  background: var(--glass-fill);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  font-size: 13px;
  color: var(--paper);
  cursor: pointer;
  pointer-events: auto;
  animation: toast-in var(--d-medium) var(--ease-out) both;
  transition: opacity var(--d-short) var(--ease), transform var(--d-short) var(--ease);
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
}

.toast-ok {
  border-color: #30d1584d;
  color: var(--ok);
}

.toast-warn {
  border-color: #e8c14a4d;
  color: var(--warn);
}

.toast-bad {
  border-color: #ff453a4d;
  color: var(--bad);
}

.toast span {
  color: var(--paper);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ── overlays ───────────────────────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000000a3;
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-short) var(--ease);
}

.scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sheet {
  position: fixed;
  z-index: 61;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px));
  display: grid;
  gap: var(--s4);
  padding: var(--s6);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--ink-raised);
  box-shadow: var(--shadow-soft);
  animation: sheet-in var(--d-medium) var(--ease-out) both;
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px));
  }
}

.sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.sheet-address {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--ink-soft);
  font-size: 12px;
  word-break: break-all;
  color: var(--muted-strong);
}

.sheet-list {
  display: grid;
  gap: 6px;
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--ink-soft);
  font-size: 14px;
  text-align: left;
  color: var(--paper);
  transition: border-color var(--d-short) var(--ease), background var(--d-short) var(--ease);
}

.sheet-item > span {
  flex: 1;
}

.sheet-item:hover {
  border-color: var(--accent);
  background: var(--pf-accent-soft);
}

.sheet-item.is-danger:hover {
  border-color: var(--bad);
  background: #ff453a17;
  color: var(--bad);
}

.sheet-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.sheet-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--paper-36);
}

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Between the widest phone and a roomy laptop the three topbar columns add up
   to more than the window. Trim the utilities and the nav padding here rather
   than letting the centred nav overflow its column and sit on top of them. */
@media (max-width: 1200px) {
  .wallet-wide {
    display: none;
  }

  .wallet-narrow {
    display: inline;
  }
}

@media (max-width: 1120px) {
  .topbar {
    gap: var(--s4);
    padding: 0 var(--s4);
  }

  .desktop-nav a {
    padding: 8px 10px;
  }

  .search {
    width: 140px;
  }

  .net-pill {
    padding: 0 12px;
  }

  .net-pill .net-label {
    display: none;
  }
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s3);
    padding: 0 var(--s4);
  }

  .desktop-nav {
    display: none;
  }

  .utilities {
    justify-content: flex-end;
  }

  .search {
    width: 132px;
  }

  .net-pill .net-label {
    display: none;
  }

  .net-pill {
    padding: 0 12px;
  }

  .mobile-dock {
    display: flex;
  }

  /* the dock is fixed, so the last of the footer would sit underneath it */
  .footer {
    padding-bottom: calc(var(--s18) + env(safe-area-inset-bottom));
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .product-page {
    padding: var(--s6) var(--s4) var(--s12);
    gap: var(--s4);
  }

  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-strip > div {
    padding: var(--s3) var(--s4);
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .metric-strip > div:nth-child(-n + 2) {
    border-top: 0;
  }

  .metric-strip > div:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .lens {
    padding: var(--s4);
  }

  .footer {
    padding-left: var(--s4);
    padding-right: var(--s4);
  }

  .toast-stack {
    right: var(--s4);
    left: var(--s4);
    bottom: calc(var(--s18) + var(--s2));
    justify-items: stretch;
  }

  .toast {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .connect-wide {
    display: none;
  }

  .connect-narrow {
    display: inline;
  }

  .mobile-dock a {
    font-size: 9.5px;
    letter-spacing: 0.05em;
  }
}

@media (max-width: 520px) {
  .search {
    width: 44px;
    padding: 0 12px;
  }

  .search input {
    width: 0;
    padding: 0;
  }

  .search:focus-within {
    position: absolute;
    left: var(--s4);
    right: var(--s4);
    width: auto;
    background: var(--ink-soft);
  }

  .search:focus-within input {
    width: auto;
    flex: 1;
  }

  .sheet {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: var(--r-card) var(--r-card) 0 0;
    padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
    animation-name: sheet-up;
  }

  @keyframes sheet-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}