/* Wallet connect.
   The modal follows the OS theme, and js/ui.js writes the answer onto .wc-modal
   as data-wc-theme. A host pins it by putting data-wc-theme="light" or "dark"
   on the container it handed the modal, or on <html>. Every colour is a token
   so the two themes stay in step, and nothing in a component rule hard-codes a
   colour that only works in one. */

:root {
  --page-bg: #fbfbfd;
  --page-fg: #12141a;
  --page-muted: #5f6673;
  --page-line: #e5e7ec;
  --page-surface: #ffffff;
  --page-glow: rgba(109, 125, 255, 0.14);

  /* The primary button is white text on a gradient between these two, so the
     lighter end is what sets the floor — white on #8a6cff was 3.7:1. Both stops
     now sit under the luminance that clears 4.5:1 against white, and the pair
     still reads as a blue-to-violet sweep. */
  --wc-accent: #4a5cf0;
  --wc-accent-2: #6d4ff0;
  --wc-accent-fg: #ffffff;
  /* Accent as *text* is a different colour from accent as *fill*, and it has to
     be. No single blue clears 4.5:1 on both #ffffff and #17181d — the two
     grounds are 16:1 apart, so the same hue cannot sit above 4.5 on each. The
     fill keeps the vivid blue; the text tokens below are per theme. */
  --wc-accent-text: #4a5cf0;
  --wc-radius: 26px;
  --wc-radius-s: 14px;
  --wc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --wc-ease: cubic-bezier(0.22, 0.9, 0.28, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0b0c10;
    --page-fg: #f3f4f7;
    --page-muted: #8f96a5;
    --page-line: #23252d;
    --page-surface: #14161b;
    --page-glow: rgba(109, 125, 255, 0.1);
  }
}

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

/* ---------- standalone preview chrome ----------

   The rule below, and the padding on .wallet further down, are what make
   index.html readable when it is opened on its own. They are not the
   component. A host that drops this into an existing page deletes both: their
   page already sets a background, a text colour and a font, and it supplies
   its own spacing around whatever it is mounting.

   The component proper starts at .btn. */

body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(70ch 45ch at 50% -10%, var(--page-glow), transparent 70%),
    var(--page-bg);
  color: var(--page-fg);
  font-family: var(--wc-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chrome, or not? Not. This is the modal's scroll lock, and it is wanted in
   every host, which is why it survives the block above. */
body.wc-locked { overflow: hidden; }

/* ---------- the wallet section ---------- */

/* It does not centre itself, cap its own width, or paint a background. A
   section dropped into someone else's page that does any of those things is
   fighting the page it is in. The padding is the preview's and comes off with
   the block above. */
.wallet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 40px 20px 64px;
}

.wallet__status {
  margin: 2px 0 0;
  min-height: 1.5em;
  font-size: 13px;
  color: var(--page-muted);
  font-variant-numeric: tabular-nums;
}

.btn {
  appearance: none;
  border: 1px solid var(--page-line);
  background: var(--page-surface);
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.06s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--wc-accent), var(--wc-accent-2));
  color: var(--wc-accent-fg);
  box-shadow: 0 8px 24px -10px var(--wc-accent);
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 3px; }

/* ---------- overlay ---------- */

.wc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(8, 9, 12, 0.5);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

.wc-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}

/* ---------- modal ---------- */

.wc-modal {
  --wc-bg: #17181d;
  --wc-bg-2: #1e2027;
  --wc-bg-3: #262934;
  --wc-fg: #f4f5f8;
  --wc-muted: #8b93a3;
  --wc-line: #2a2c35;
  --wc-hover: rgba(255, 255, 255, 0.055);
  --wc-badge-bg: #2c2f39;
  --wc-badge-fg: #cfd4e0;
  --wc-accent-text: #7d8bff;
  --wc-ok: #5fd39a;
  --wc-bad: #ff8a8a;
  --wc-warn: #f0b45e;
  --wc-warn-bg: color-mix(in srgb, #f0b45e 16%, transparent);
  --wc-shadow: 0 32px 70px -20px rgba(0, 0, 0, 0.75);

  width: min(384px, 100%);
  max-height: min(680px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  border-radius: var(--wc-radius);
  background: var(--wc-bg);
  color: var(--wc-fg);
  border: 1px solid var(--wc-line);
  box-shadow: var(--wc-shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(10px) scale(0.985);
  opacity: 0;
  transition: transform 0.32s var(--wc-ease), opacity 0.22s ease;
}

.wc-overlay.is-open .wc-modal { transform: none; opacity: 1; }

.wc-modal[data-wc-theme="light"] {
  --wc-bg: #ffffff;
  --wc-bg-2: #f5f6f9;
  --wc-bg-3: #eceef3;
  --wc-fg: #13151a;
  --wc-muted: #6a7181;
  --wc-line: #e6e8ee;
  --wc-hover: rgba(0, 0, 0, 0.04);
  --wc-badge-bg: #eceef3;
  --wc-badge-fg: #4c5462;
  --wc-accent-text: #4a5cf0;
  /* Darkened from #0e7a48: on its own 14% tint the lighter green came out at
     4.43:1, just under AA. This is 4.83:1. */
  --wc-ok: #0d7343;
  --wc-bad: #c02b2b;
  --wc-warn: #7c4d00;
  --wc-warn-bg: color-mix(in srgb, #e8a33d 30%, transparent);
  --wc-shadow: 0 30px 60px -18px rgba(15, 18, 28, 0.28);
}

.wc-modal:focus { outline: none; }

.wc-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 4px;
  animation: wc-fade 0.26s var(--wc-ease) both;
}

/* ---------- header ---------- */

.wc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.wc-header__spacer { width: 32px; flex: none; }

.wc-title {
  flex: 1;
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.012em;
  text-align: center;
}

.wc-iconbtn {
  appearance: none;
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wc-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.wc-iconbtn:hover:not(:disabled) { background: var(--wc-hover); color: var(--wc-fg); }
.wc-iconbtn:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 1px; }
.wc-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.wc-iconbtn--sm { width: 28px; height: 28px; }

.wc-icon { display: block; flex: none; }

.wc-spinner { animation: wc-spin 0.75s linear infinite; }

/* ---------- lists ---------- */

.wc-stack { display: flex; flex-direction: column; gap: 14px; }

.wc-section { display: flex; flex-direction: column; gap: 4px; }

.wc-section__label {
  margin: 0 0 2px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wc-muted);
}

.wc-list { display: flex; flex-direction: column; gap: 2px; }

.wc-wallet {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px 8px 8px;
  border: 0;
  border-radius: var(--wc-radius-s);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.13s ease;
}

.wc-wallet:hover { background: var(--wc-hover); }
.wc-wallet:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: -2px; }
.wc-wallet[hidden] { display: none; }
.wc-wallet > .wc-icon { color: var(--wc-muted); }

.wc-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--wc-bg-2);
}

.wc-avatar--mono {
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--wc-muted);
  background: var(--wc-bg-3);
}

.wc-avatar--mark { background: none; }

.wc-wallet__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.wc-wallet__name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-wallet__meta {
  font-size: 12px;
  color: var(--wc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-badge {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--wc-badge-bg);
  color: var(--wc-badge-fg);
}

.wc-badge--muted {
  background: transparent;
  border: 1px solid var(--wc-line);
  color: var(--wc-muted);
}

/* ---------- empty ---------- */

.wc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 12px;
  text-align: center;
}

.wc-empty__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--wc-bg-2);
  color: var(--wc-muted);
}

.wc-empty__title { margin: 0; font-weight: 600; font-size: 14.5px; }
.wc-empty__body {
  margin: 0;
  font-size: 12.5px;
  color: var(--wc-muted);
  text-wrap: pretty;
  max-width: 34ch;
}

/* ---------- all wallets ---------- */

.wc-all { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.wc-search { position: relative; display: flex; align-items: center; }

.wc-search > .wc-icon {
  position: absolute;
  left: 12px;
  color: var(--wc-muted);
  pointer-events: none;
}

.wc-input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 11px 12px;
  border-radius: var(--wc-radius-s);
  border: 1px solid var(--wc-line);
  background: var(--wc-bg-2);
  color: inherit;
  appearance: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.wc-search .wc-input { padding-left: 36px; }

/* The recipient field holds a machine string, not prose, so it is set in mono
   like every other address in this modal — and at a size that actually fits one.
   This matters more than it looks: an <input> clips its text at the border, with
   no ellipsis and no wrap, so an address a few pixels too wide does not look
   shortened, it runs flush into the edge and loses its tail — and the tail is
   the part a person is checking.
   Measured in the real form rather than guessed: its content box is 310px at
   the 12px padding the other fields use, and 314px with the narrower padding
   below. At the 14px those fields use, a 42-character EVM address measures 348px
   and a 44-character Solana one 357px; in mono they are worse. Even 12px mono
   clips the long Solana case. A monospace advance is 0.6em, so 44 characters
   need font-size <= 11.9px — 11.5px is that, with about 10px to spare. */
.wc-input--addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  padding-inline: 10px;
}

.wc-input::placeholder { color: var(--wc-muted); }
.wc-input:hover { border-color: color-mix(in srgb, var(--wc-line) 60%, var(--wc-muted)); }
.wc-input:focus {
  outline: none;
  border-color: var(--wc-accent);
  background: var(--wc-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc-accent) 22%, transparent);
}

.wc-input[aria-invalid="true"] {
  border-color: var(--wc-bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc-bad) 18%, transparent);
}

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

/* ---------- account panel ---------- */

.wc-panel { display: flex; flex-direction: column; gap: 10px; }

.wc-panel__head { display: flex; align-items: center; gap: 12px; }
.wc-panel__id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wc-panel__name {
  font-size: 15.5px;
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The network badge. Deliberately louder than a chip: on a wallet screen the
   network you are connected to decides whether the next button moves real money,
   so it is stated rather than implied. The TESTNET tag is the part that has to
   survive a glance. */
.wc-net {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 3px 4px 3px 9px;
  border-radius: 999px;
  background: var(--wc-bg-2);
  border: 1px solid var(--wc-line);
  font-size: 11.5px;
  color: var(--wc-fg);
}

/* Solana's own green, fixed rather than tokenised per theme. It identifies the
   network, and a network marker that changed colour with the theme would be a
   network marker the user has to learn twice. */
.wc-net__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14f195;
  box-shadow: 0 0 0 3px rgba(20, 241, 149, 0.2);
}

.wc-net__name { font-weight: 620; letter-spacing: -0.01em; }

.wc-net__tag {
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--wc-warn-bg);
  color: var(--wc-warn);
}

.wc-kv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px 9px 12px;
  border-radius: var(--wc-radius-s);
  background: var(--wc-bg-2);
}

.wc-kv__label {
  flex: none;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wc-muted);
}

.wc-kv__value {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-kv__value--amount { font-variant-numeric: tabular-nums; }
.wc-kv__value--muted { color: var(--wc-muted); font-family: inherit; font-size: 13px; }

.wc-copy {
  flex: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--wc-accent-text);
  font: inherit;
  font-size: 12px;
  font-weight: 620;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 8px;
  transition: background 0.14s ease;
}

.wc-copy:hover { background: var(--wc-hover); }
.wc-copy:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 1px; }

/* ---------- form ---------- */

.wc-form { display: flex; flex-direction: column; gap: 10px; }
.wc-field { display: flex; flex-direction: column; gap: 6px; }

.wc-field__label {
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wc-muted);
}

.wc-field-error {
  margin: 0;
  font-size: 12.5px;
  color: var(--wc-bad);
  text-wrap: pretty;
}

/* The rehearsal.
   It appears only once both fields are genuinely sendable, so its arrival is
   itself the "you can send this now" signal — the enabled button confirms it a
   moment later. Its whole job is to restate the transfer in words and in a
   picture, because by the time the wallet's own prompt is on screen the address
   is a wall of hex with nothing to check it against. Tinted rather than neutral:
   a quiet grey box would read as another warning. */
.wc-intent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--wc-radius-s);
  background: color-mix(in srgb, var(--wc-accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--wc-accent) 26%, transparent);
  animation: wc-intent-in 0.26s var(--wc-ease) both;
}

@keyframes wc-intent-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

/* display:flex above would otherwise beat the UA sheet's [hidden] rule — an
   author rule always wins over the UA one — so the hidden state is restated. */
.wc-intent[hidden] { display: none; }

/* The svg carries the rounding, but the box must not be squeezed by a long
   address beside it. */
.wc-intent__icon { flex: none; display: flex; width: 28px; height: 28px; }
.wc-intent__icon svg { display: block; }

.wc-intent__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--wc-muted);
  text-wrap: pretty;
}

.wc-intent__text strong { color: var(--wc-fg); font-weight: 650; }
/* Digits that are about to be signed line up; the address is set in mono so it
   is obviously a string to compare, not a word to read. */
.wc-intent__amount { font-variant-numeric: tabular-nums; }
.wc-intent__to { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.wc-actions { display: flex; gap: 8px; }
.wc-actions--end { justify-content: flex-end; }

.wc-btn {
  appearance: none;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-weight: 620;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--wc-line);
  background: var(--wc-bg-2);
  color: inherit;
  cursor: pointer;
  transition: filter 0.14s ease, transform 0.06s ease, opacity 0.14s ease;
}

.wc-btn:hover:not(:disabled) { filter: brightness(1.12); }
.wc-btn:active:not(:disabled) { transform: translateY(1px); }
.wc-btn:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 2px; }

.wc-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--wc-accent), var(--wc-accent-2));
  color: var(--wc-accent-fg);
  box-shadow: 0 8px 22px -12px var(--wc-accent);
}

.wc-btn--quiet {
  flex: none;
  background: transparent;
  border-color: transparent;
  color: var(--wc-muted);
  padding-inline: 14px;
}

.wc-btn--quiet:hover:not(:disabled) { color: var(--wc-fg); background: var(--wc-hover); }

/* A disabled button is drawn as an inactive surface, not as a faded picture of
   an active one. Fading the whole element composites the label into the
   background along with the fill, which in the light theme left white on pale
   lavender at 45% — the label all but gone. A label you cannot read is not a
   clearer way of saying "not yet", and the muted-on-raised pairing it uses
   instead is one of the measured ones: 4.53:1 light, 5.27:1 dark. (Disabled
   controls are exempt from the contrast minimum, so this is craft, not
   compliance — the rule holds either way.) */
.wc-btn:disabled {
  opacity: 1;
  filter: none;
  background: var(--wc-bg-2);
  color: var(--wc-muted);
  border-color: var(--wc-line);
  box-shadow: none;
  cursor: not-allowed;
}

/* The quiet variant is text and nothing else, so fading it is the same as
   fading its label — no surface to preserve, and the dimming is the signal. */
.wc-btn--quiet:disabled { opacity: 0.45; background: transparent; }

/* ---------- status ---------- */

.wc-statuses { display: flex; flex-direction: column; gap: 8px; }

.wc-status,
.wc-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--wc-radius-s);
  font-size: 13px;
  line-height: 1.4;
  text-wrap: pretty;
}

.wc-status--pending { background: var(--wc-bg-2); color: var(--wc-muted); }

.wc-status--ok,
.wc-alert--ok {
  background: color-mix(in srgb, var(--wc-ok) 14%, transparent);
  color: var(--wc-ok);
}

.wc-status--bad,
.wc-alert--error {
  background: color-mix(in srgb, var(--wc-bad) 15%, transparent);
  color: var(--wc-bad);
}

.wc-status__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: inherit;
  font-weight: 650;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.wc-status__link:hover { text-decoration: underline; }

.wc-hint { margin: 0; font-size: 12.5px; color: var(--wc-muted); text-wrap: pretty; }
.wc-hint a { color: var(--wc-accent-text); }

/* ---------- about ---------- */

.wc-about { display: flex; flex-direction: column; gap: 12px; }
.wc-about p { margin: 0; font-size: 13.5px; color: var(--wc-muted); text-wrap: pretty; }

.wc-about__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wc-about__list li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  color: var(--wc-muted);
  text-wrap: pretty;
}

.wc-about__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wc-accent), var(--wc-accent-2));
}

/* ---------- footer ---------- */

.wc-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 16px 16px;
}

.wc-allrow {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: var(--wc-radius-s);
  background: var(--wc-bg-2);
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 620;
  cursor: pointer;
  transition: background 0.14s ease;
}

.wc-allrow:hover { background: var(--wc-bg-3); }
.wc-allrow:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: -2px; }
.wc-allrow > .wc-icon { margin-left: auto; color: var(--wc-muted); }

/* A flex row, or the count and the chevron stack — .wc-icon is display:block. */
.wc-allrow__count {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--wc-muted);
  font-weight: 550;
}

.wc-footnote {
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--wc-muted);
  text-wrap: pretty;
}

.wc-footnote--link {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  padding: 4px;
  border-radius: 8px;
  transition: color 0.14s ease;
}

.wc-footnote--link:hover { color: var(--wc-fg); text-decoration: underline; }

/* ---------- motion ---------- */

@keyframes wc-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

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

/* Rows rise in sequence rather than all at once. Capped at eight so a long
   list does not end up waiting on a delay nobody sees. */
.wc-list > .wc-wallet { animation: wc-fade 0.3s var(--wc-ease) both; }
.wc-list > .wc-wallet:nth-child(1) { animation-delay: 0.01s; }
.wc-list > .wc-wallet:nth-child(2) { animation-delay: 0.03s; }
.wc-list > .wc-wallet:nth-child(3) { animation-delay: 0.05s; }
.wc-list > .wc-wallet:nth-child(4) { animation-delay: 0.07s; }
.wc-list > .wc-wallet:nth-child(5) { animation-delay: 0.09s; }
.wc-list > .wc-wallet:nth-child(6) { animation-delay: 0.11s; }
.wc-list > .wc-wallet:nth-child(7) { animation-delay: 0.13s; }
.wc-list > .wc-wallet:nth-child(n + 8) { animation-delay: 0.15s; }

/* ---------- narrow screens ---------- */

@media (max-width: 420px) {
  .wc-overlay { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .wc-modal { width: 100%; max-height: calc(100dvh - 20px); border-radius: 22px; }
  .page { padding: 13vh 20px 48px; }
}

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