/* Forex Trade — /login and /dashboard.
 *
 * Structure, proportions and hierarchy come from the panel of the sibling project
 * (components/AuthLogin.module.css): a "Go Back" button in the top left corner, a centred card of
 * 400 px, a 65 px icon tile, a big title, a short paragraph, two full width buttons of 320 x 54
 * and a small footnote.
 *
 * ---------------------------------------------------------------------------------------------
 * COLOUR: FLAT ONLY (mandatory project rule)
 * The skin follows the landing page and nothing else. One flat purple, #5546ff, fills the page.
 * Every surface on top of it is another FLAT step of that same hue, never a gradient. There is no
 * radial background, no vignette, no grain, no glassmorphism and no translucency anywhere.
 * Accents: lime #bfff0a (focus ring only), white, and the dark purple ink of the ramp.
 *
 * ALL the depth comes from shadows. One light direction for the whole page: TOP LEFT. From it:
 *   . cast shadows fall down and to the right (positive x, positive y);
 *   . the 1 px light edge is ALWAYS on top (inset 0 1px 0, light);
 *   . the inner dark shadow is ALWAYS at the bottom (inset 0 -1px 0, dark);
 *   . a recess (the icon tile, a pressed button) swaps those two: dark on top, light below.
 * No shadow is black: every one of them is tinted with the dark purple rgba(20, 12, 90, ...).
 *
 * ---------------------------------------------------------------------------------------------
 * SHADOW LAYERS (the list, and further down they are actually applied)
 *
 * CARD (.au-card), a flat #4434ec surface on the flat #5546ff page
 *   1. CONTACT      0 1px 2px -1px rgba(20,12,90,.95)       short and hard, glues it to the page
 *   2. KEY          5px 16px 28px -10px rgba(20,12,90,.55)  medium, offset down and right
 *   3. AMBIENT      12px 52px 90px -32px rgba(20,12,90,.55) long and very diffuse
 *   4. EDGE LIGHT   inset 0 1px 0 rgba(255,255,255,.30)
 *   5. INNER SHADOW inset 0 -1px 0 rgba(20,12,90,.55)
 *   6. BORDER       1px solid rgba(255,255,255,.28)
 *
 * ICON TILE (.au-tile), a flat #3527cc RECESS, so the two insets are swapped
 *   1. RECESS       inset 0 3px 8px rgba(20,12,90,.65)
 *   2. LIGHT BELOW  inset 0 -1px 0 rgba(255,255,255,.26)
 *   3. RELIEF       0 1px 0 rgba(255,255,255,.18)
 *
 * BUTTONS (.au-btn), the same families at a smaller scale
 *   rest      1. CONTACT      0 1px 1px -1px rgba(20,12,90,.9)
 *             2. KEY          3px 7px 14px -5px rgba(20,12,90,.5)
 *             3. AMBIENT      5px 18px 32px -16px rgba(20,12,90,.5)
 *             4. EDGE LIGHT   inset 0 1px 0 (white .95 on the light button, .26 on the dark one)
 *             5. INNER SHADOW inset 0 -1px 0 rgba(20,12,90,.35)
 *   hover     LIFTS: translateY(-1px), layers 2 and 3 grow longer
 *   active    SINKS: translateY(1px), insets only, light inverted
 *   focus     white ring plus a lime #bfff0a outer ring on :focus-visible, added to the rest
 *   disabled  opacity .6, only the contact and edge light layers left
 *   border    1px rgba(255,255,255,.62) on every control: two flat steps of the same hue can
 *             never reach 3:1 against each other, so the white edge carries the boundary
 *
 * The specular highlight on the primary button is an ::after with a diagonal white gradient that
 * sweeps across it on hover. It is the only gradient in the file, it is a moving highlight and not
 * a surface fill, and it only exists while the pointer is over the button.
 */

@font-face {
  font-family: 'Humane Bold';
  src: url('/63bf3e1c32ea7ba16d1bdf88/63bf3e1c32ea7b2c3d1bdf93_Humane-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* one hue (~245 deg), ten flat steps. Every surface of these two pages is one of them. */
  --fx-p-900: #150d6e;
  --fx-p-800: #1e148f;
  --fx-p-700: #2a1fa8;
  --fx-p-600: #3527cc;
  --fx-p-500: #4434ec;
  --fx-p-400: #5546ff;   /* base: --slate-blue of the landing, and the page background */
  --fx-p-300: #6a5cff;
  --fx-p-200: #8b7eff;
  --fx-p-100: #b7b0ff;
  --fx-p-050: #ece9ff;

  --fx-lime: #bfff0a;    /* landing accent, used for the focus ring only */

  /* every shadow in this file is tinted with this dark purple, never with black */
  --fx-sd: 20, 12, 90;
}

/* ------------------------------------------------------------------------------- base */
.au-body {
  margin: 0;
  min-height: 100vh;
  background: var(--fx-p-400);
  color: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.au-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: var(--fx-p-400);          /* flat, on purpose. No gradient, no vignette, no grain. */
}

/* ---------------------------------------------------------------------------- go back */
.au-back {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  padding: 0 12px 0 8px;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color .2s ease;
}

.au-back span { font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.au-back svg { width: 20px; height: 20px; flex: none; }
.au-back:hover { background: var(--fx-p-500); }

/* ------------------------------------------------------------------------------- card */
.au-card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 400px;
  padding: 36px 32px 28px;
  text-align: center;
  border-radius: 20px;
  background: var(--fx-p-500);                                  /* flat surface */
  border: 1px solid rgba(255, 255, 255, .28);                   /* 6. BORDER */
  box-shadow:
    0 1px 2px -1px rgba(var(--fx-sd), .95),                     /* 1. CONTACT */
    5px 16px 28px -10px rgba(var(--fx-sd), .55),                /* 2. KEY */
    12px 52px 90px -32px rgba(var(--fx-sd), .55),               /* 3. AMBIENT */
    inset 0 1px 0 rgba(255, 255, 255, .30),                     /* 4. EDGE LIGHT */
    inset 0 -1px 0 rgba(var(--fx-sd), .55);                     /* 5. INNER SHADOW */
}

/* ------------------------------------------------------------------------------- tile */
.au-tile {
  width: 65px;
  height: 65px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--fx-p-600);                                  /* flat, one step darker */
  box-shadow:
    inset 0 3px 8px rgba(var(--fx-sd), .65),                    /* 1. RECESS */
    inset 0 -1px 0 rgba(255, 255, 255, .26),                    /* 2. LIGHT BELOW */
    0 1px 0 rgba(255, 255, 255, .18);                           /* 3. RELIEF */
}

.au-tile svg { width: 28px; height: 28px; display: block; }

/* ------------------------------------------------------------------------------- text */
/* The big title uses the landing's display face, Humane Bold in caps, like every heading on the
   site. Body copy stays Helvetica Neue light. */
.au-title {
  margin: 2px 0 -2px;
  font-family: 'Humane Bold', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 64px;
  line-height: .84;
  letter-spacing: .012em;
  color: #ffffff;
}

.au-sub {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff;
}

.au-note {
  margin: 4px 0 0;
  max-width: 300px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--fx-p-050);
}

.au-error {
  margin: 0;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--fx-lime);
}

.au-error[hidden] { display: none; }

/* ---------------------------------------------------------------------------- buttons */
.au-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.au-btn {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  min-height: 54px;
  padding: 15px 22px;
  border-radius: 14px;
  /* Two flat steps of the same hue can never reach 3:1 against each other, so the boundary of
     every control is carried by this white edge: measured above 3:1 on the card surface. */
  border: 1px solid rgba(255, 255, 255, .62);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  color: #ffffff;
  background: var(--fx-p-600);                                  /* flat */
  box-shadow:
    0 1px 1px -1px rgba(var(--fx-sd), .90),
    3px 7px 14px -5px rgba(var(--fx-sd), .50),
    5px 18px 32px -16px rgba(var(--fx-sd), .50),
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(var(--fx-sd), .35);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* The wallet button is the LIGHT surface: on a purple page that is what reads as primary.
   "Continue without wallet" keeps the same size, the same layers and the same weight, one flat
   step darker, because it is the path most people take. */
.au-btn-primary {
  color: var(--fx-p-700);
  background: var(--fx-p-050);
  border-color: rgba(255, 255, 255, .85);
  box-shadow:
    0 1px 1px -1px rgba(var(--fx-sd), .90),
    3px 7px 14px -5px rgba(var(--fx-sd), .55),
    5px 18px 32px -16px rgba(var(--fx-sd), .55),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(var(--fx-sd), .22);
}

.au-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
}

.au-btn-ico svg { width: 24px; height: 24px; display: block; }
.au-btn-ico img { width: 26px; height: 26px; display: block; border-radius: 6px; }
.au-btn-label { position: relative; z-index: 1; }
.au-btn[hidden] { display: none; }

/* hover: LIFTS (longer key and ambient layers) */
.au-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--fx-p-500);
  box-shadow:
    0 1px 1px -1px rgba(var(--fx-sd), .90),
    4px 12px 22px -6px rgba(var(--fx-sd), .55),
    8px 28px 50px -20px rgba(var(--fx-sd), .55),
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(var(--fx-sd), .35);
}

.au-btn-primary:hover:not(:disabled) {
  background: #ffffff;
  box-shadow:
    0 1px 1px -1px rgba(var(--fx-sd), .90),
    4px 12px 22px -6px rgba(var(--fx-sd), .60),
    8px 28px 50px -20px rgba(var(--fx-sd), .60),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(var(--fx-sd), .22);
}

/* pressed: SINKS (insets only, light inverted) */
.au-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(var(--fx-sd), .60),
    inset 0 -1px 0 rgba(255, 255, 255, .22),
    0 1px 1px -1px rgba(var(--fx-sd), .90);
}

/* keyboard focus: a white ring with the landing's lime just outside it */
.au-btn:focus-visible,
.au-back:focus-visible,
.db-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 6px var(--fx-lime),
    3px 7px 14px -5px rgba(var(--fx-sd), .50),
    inset 0 1px 0 rgba(255, 255, 255, .26);
}

.au-btn:disabled {
  cursor: default;
  opacity: .6;
  box-shadow: 0 1px 1px -1px rgba(var(--fx-sd), .9), inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* specular highlight: sweeps across the primary button on hover, transform only */
.au-btn-primary::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 0;
  width: 42%;
  height: 180%;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-160%) skewX(-18deg);
}

.au-btn-primary:hover::after { animation: au-sheen .85s cubic-bezier(.22, 1, .36, 1) 1; }

@keyframes au-sheen {
  from { transform: translateX(-160%) skewX(-18deg); }
  to   { transform: translateX(340%) skewX(-18deg); }
}

/* loading state spinner */
.au-spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #ffffff;
  animation: au-spin .8s linear infinite;
}

.au-btn-primary .au-spin { border-color: rgba(42, 31, 168, .3); border-top-color: var(--fx-p-700); }

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

/* list of wallets discovered through EIP-6963 */
.au-wallets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.au-wallets[hidden] { display: none; }

.au-wallets-t {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #ffffff;
}

/* -------------------------------------------------------------------------- dashboard */
.db-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--fx-p-500);                                  /* flat */
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 1px 2px -1px rgba(var(--fx-sd), .9),
    6px 18px 36px -24px rgba(var(--fx-sd), .6);
}

.db-brand { display: inline-flex; color: #ffffff; text-decoration: none; }
.db-brand svg, .db-brand img { display: block; height: 30px; width: auto; }
.db-brand svg { color: #ffffff; }
.db-spacer { flex: 1 1 auto; }

.db-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .62);
  background: var(--fx-p-600);
  box-shadow:
    inset 0 2px 5px rgba(var(--fx-sd), .55),
    inset 0 -1px 0 rgba(255, 255, 255, .22),
    0 1px 0 rgba(255, 255, 255, .14);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.db-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fx-lime); }

.db-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .62);
  background: var(--fx-p-600);
  box-shadow:
    0 1px 1px -1px rgba(var(--fx-sd), .9),
    3px 7px 14px -5px rgba(var(--fx-sd), .5),
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(var(--fx-sd), .35);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.db-btn[hidden] { display: none; }
.db-btn svg { width: 16px; height: 16px; }

.db-btn:hover {
  transform: translateY(-1px);
  background: var(--fx-p-500);
  box-shadow:
    0 1px 1px -1px rgba(var(--fx-sd), .9),
    4px 12px 22px -6px rgba(var(--fx-sd), .55),
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(var(--fx-sd), .35);
}

.db-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(var(--fx-sd), .6), inset 0 -1px 0 rgba(255, 255, 255, .22);
}

.db-main {
  position: relative;
  min-height: calc(100vh - 69px);
  padding: 72px 24px 96px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fx-p-400);                                  /* flat, same as /login */
}

.db-empty {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.db-empty h1 {
  margin: 0;
  font-family: 'Humane Bold', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 72px;
  line-height: .84;
  letter-spacing: .012em;
  color: #ffffff;
}

.db-empty p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: #ffffff; }

/* ---------------------------------------------------------------------------- entrance */
/* Hidden initial state ONLY when JS runs: with no JS everything is visible. site/fx/auth.js
   animates it with Motion. */
html.js .au-anim { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js .au-anim { opacity: 1; }
  .au-btn, .db-btn { transition: none; }
  .au-btn-primary:hover::after { animation: none; }
  .au-spin { animation-duration: 2s; }
}

/* ------------------------------------------------------------------------------ 390 px */
@media (max-width: 480px) {
  .au-page { padding: 88px 16px 32px; align-items: flex-start; }
  .au-back { top: 16px; left: 12px; }
  .au-card { padding: 28px 20px 24px; border-radius: 18px; }
  .au-title { font-size: 54px; }
  .au-sub { font-size: 15px; }
  .db-top { padding: 10px 12px; gap: 6px; }
  .db-brand svg, .db-brand img { height: 22px; }
  .db-chip, .db-btn { height: 32px; padding: 0 9px; font-size: 11px; gap: 6px; }
  .db-btn svg { width: 14px; height: 14px; }
  .db-dot { width: 7px; height: 7px; }
  .db-main { padding: 48px 16px 72px; min-height: calc(100vh - 53px); }
  .db-empty h1 { font-size: 52px; }
}