/* Shell for the app pages. The design tokens (--color-*, --text-*, the Suisse
   faces) come from the landing page's own compiled stylesheet, which every app
   page links before this one. Nothing here invents a colour or a type size. */

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

html {
  background: var(--color-grey);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-10);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--color-black);
  background: var(--color-grey);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}
input,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
::placeholder {
  color: currentColor;
  opacity: 0.35;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dim {
  opacity: 0.5;
}
.tnum {
  font-variant-numeric: tabular-nums;
}
/* Addresses are mono but not shouted — 0xAbC… reads worse than 0xabc…. */
/* A full 42-character address has no space in it to break at, so on a 360px
   phone it runs off the side of the screen. Hex reads fine wrapped. */
.addr {
  font-family: var(--font-mono);
  font-size: var(--text-caption-10);
  letter-spacing: 0.06em;
  text-transform: none;
  overflow-wrap: anywhere;
}

/* ─── header ─────────────────────────────────────────────────────────── */

.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--color-black);
}
.hdr__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-right: 1px solid var(--color-black);
}
.hdr__mark i {
  display: block;
  width: 20px;
  aspect-ratio: 596 / 787;
  background-color: var(--color-black);
  -webkit-mask: url(/logo.png) no-repeat center / contain;
  mask: url(/logo.png) no-repeat center / contain;
}
.hdr__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
}
.hdr__nav a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hdr__right {
  display: flex;
  align-items: stretch;
}
.hdr__chain {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-left: 1px solid var(--color-black);
  white-space: nowrap;
  transition: background 0.2s;
}
.hdr__chain:hover {
  background: var(--color-grey);
}
/* The status light is the Arc mark itself rather than a dot sitting next to it.
   Grey before a wallet answers, green once it is on 5042, red when it is not:
   one glyph says both which chain this is and whether you are standing on it. */
.hdr__chain::before {
  content: '';
  width: 15px;
  height: 15px;
  flex: none;
  background-color: var(--color-black);
  opacity: 0.3;
  -webkit-mask: url(/arc.svg) no-repeat center / contain;
  mask: url(/arc.svg) no-repeat center / contain;
}
.hdr__chain[data-ok='1']::before {
  background-color: #1f8f4e;
  opacity: 1;
}
.hdr__chain[data-ok='0']::before {
  background-color: #c0392b;
  opacity: 1;
}
/* Wrong network is the one state with something to fix rather than something to
   look at, so it is the one state that colours itself in. */
.hdr__chain[data-ok='0']:hover {
  background: var(--color-mint);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 170px;
  padding: 0 20px;
  background: var(--color-black);
  color: #fff;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.btn:hover {
  opacity: 0.85;
}
.btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.btn--ghost {
  background: none;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}
.btn--block {
  width: 100%;
  min-height: 56px;
  justify-content: space-between;
}
.btn--sm {
  min-width: 0;
  min-height: 38px;
  padding: 0 14px;
  font-size: var(--text-caption-20);
}

/* Narrow screens get the nav on its own row rather than losing it. Hiding it
   behind a hamburger would cost a script and an overlay to say three words;
   wrapping the grid says them outright and costs 46px. */
@media (max-width: 720px) {
  .hdr {
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-rows: 56px auto;
  }
  .hdr__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 22px;
    height: 46px;
    border-top: 1px solid var(--color-black);
  }
  /* The mark still reports the network. The words next to it do not fit, and
     green-or-red is the whole message anyway — until it is red, which is the
     one case where the reader has to be told what to do about it. */
  .hdr__chain {
    gap: 0;
    padding: 0 14px;
    font-size: 0;
  }
  /* "Switch to Arc" and a truncated address are 400px of header inside 390px of
     phone, and the button that loses is the one carrying the wallet. So the
     label is set from here instead: the mark is already red and already Arc's,
     which leaves the verb as the only word doing any work. font-size:0 above
     hides the real text node; ::after brings its own size back. */
  .hdr__chain[data-ok='0'] {
    gap: 8px;
  }
  .hdr__chain[data-ok='0']::after {
    content: 'Switch';
    font-size: var(--text-caption-10);
  }
  .btn {
    min-width: 0;
  }
}

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

/* The footer sits at the bottom of short pages, and the last band of panels
   stretches to meet it, so the column rules run the full height. */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
main > .wrap:last-child {
  flex: 1 0 auto;
}

.wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--color-black);
  border-bottom: 1px solid var(--color-black);
}
.panel {
  grid-column: span 12;
  padding: clamp(20px, 3vw, 44px);
  background: #fff;
}
.panel--grey {
  background: var(--color-grey);
}
.panel--sky {
  background: var(--color-mint);
}
.panel--ink {
  background: var(--color-black);
  color: #fff;
}
@media (min-width: 900px) {
  .c4 {
    grid-column: span 4;
  }
  .c5 {
    grid-column: span 5;
  }
  .c6 {
    grid-column: span 6;
  }
  .c7 {
    grid-column: span 7;
  }
  .c8 {
    grid-column: span 8;
  }
}

h1 {
  font-size: var(--text-headline-30);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.04em;
}
h2 {
  font-size: var(--text-headline-10);
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.lede {
  max-width: 44ch;
  margin-top: 16px;
  opacity: 0.7;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.field {
  display: block;
}
.field > span {
  display: block;
  margin-bottom: 8px;
}
.field input,
.field select {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--color-black);
  border-radius: 0;
  outline-offset: -2px;
}
.panel--grey .field input,
.panel--grey .field select {
  background: #fff;
}
.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--color-black);
}
.field--ticker input {
  font-family: var(--font-mono);
  font-size: var(--text-body-20);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hint {
  margin-top: 8px;
  opacity: 0.55;
}
.err {
  color: #c0392b;
  opacity: 1;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.row > * {
  flex: 1 1 160px;
}

/* buy / sell */
.seg {
  display: flex;
  box-shadow: inset 0 0 0 1px var(--color-black);
}
.seg button {
  flex: 1 1 0;
  min-height: 46px;
  text-align: center;
  transition: background 0.15s;
}
.seg button[aria-selected='true'] {
  background: var(--color-black);
  color: #fff;
}

/* ─── data ───────────────────────────────────────────────────────────── */

.kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 20px;
  align-items: baseline;
}
.kv dt {
  opacity: 0.55;
}
.kv dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.list {
  display: flex;
  flex-direction: column;
}
.card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid rgba(35, 35, 35, 0.15);
  transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover {
  padding-left: 8px;
}
.card__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--text-body-20);
}
.card__sub {
  grid-column: 1;
  opacity: 0.5;
}

.tag {
  display: inline-block;
  padding: 3px 8px 4px;
  background: var(--color-mint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tag--ink {
  background: var(--color-black);
  color: #fff;
}
.tag--open {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* progress towards graduation */
/* It is a <span>, and height does nothing to an inline box — on /explore the
   bar only ever showed because `grid-column` made it a grid item and blockified
   it. On the coin page it collapsed to nothing. Say display outright. */
.bar {
  display: block;
  height: 10px;
  background: rgba(35, 35, 35, 0.12);
}
.bar i {
  display: block;
  height: 100%;
  background: var(--color-black);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── notices ────────────────────────────────────────────────────────── */

.note {
  padding: 16px 18px;
  background: var(--color-mint);
  box-shadow: inset 0 0 0 1px var(--color-black);
}
.note--warn {
  background: #fff;
}
.note--err {
  background: #fff;
  color: #c0392b;
  box-shadow: inset 0 0 0 1px currentColor;
}
.note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skeleton {
  opacity: 0.35;
}

/* The Arc mark, inline and sized to whatever text it is sitting in, so it takes
   the colour of its surroundings instead of needing one of its own. */
.arc {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.5em;
  background-color: currentColor;
  -webkit-mask: url(/arc.svg) no-repeat center / contain;
  mask: url(/arc.svg) no-repeat center / contain;
}

/* ─── focus ──────────────────────────────────────────────────────────── */

/* The default ring is a hairline against black panels and vanishes on the ink
   ones. Offsetting inwards keeps it on the element's own background, so it
   reads the same whether the panel behind it is white, grey or black. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.btn:focus-visible,
.seg button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}
.card:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: -3px;
  padding-left: 8px;
}

/* ─── motion ─────────────────────────────────────────────────────────── */

/* Every transition here is decoration — a card sliding 8px, a bar filling.
   None of it carries meaning, so honouring the preference costs nothing. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  padding: 22px clamp(20px, 3vw, 44px);
  background: var(--color-grey);
}