/* The veil page. One ink world with the Jev pink as the single accent.
   This file does two things and nothing else:
   1. It rebinds the shared tokens from styles.css for this page only, on body.veil, so every
      shared component (panel, chip, btn, field, kv, state, bar, nav, foot) comes across dark
      without a second copy of any of them. The handful of rules in styles.css that hold a
      literal colour instead of reading a token are the only ones repeated here.
   2. It adds the pieces this page invents: the five step shells, the QR plate, the deposit
      block, the countdown, the asset rows, the position rows and the ledger table.
   The accent is the Jev pink. Red is kills and reverts only. Amber is a warning about time. */

body.veil {
  --paper: #0B0B0C;
  --card: #131315;
  --ink: #F3F3F0;
  --muted: #9A9AA2;          /* 7.0:1 on the ground, 6.6:1 on a card */
  --line: #2A2A2E;
  --line-soft: #1F1F23;
  --jev: #F0298F;            /* the accent. Ink on it reads 5.1:1, so it carries button text */
  --jev-ink: #FF6FB5;        /* pink as text, 7.7:1 on the ground */
  --kill: #E5322D;
  --kill-ink: #FF6B66;
  --amber: #F5B400;
  --amber-ink: #FFC94D;
  --shadow: none;
  background: var(--paper);
  color: var(--ink);
}

/* the rules in styles.css that hold a literal colour rather than a token */
body.veil .nav { background: rgba(11, 11, 12, .9); }
body.veil .btn { background: var(--jev); border-color: var(--jev); color: #0B0B0C; }
body.veil .btn:hover { background: #FF4FA3; border-color: #FF4FA3; }
body.veil .btn .arr { background: rgba(11, 11, 12, .18); }
body.veil .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
body.veil .btn--ghost:hover { background: #1B1B1F; border-color: var(--jev); color: var(--ink); }
body.veil .btn--ghost .arr { background: rgba(243, 243, 240, .12); }
body.veil .btn--danger { background: transparent; color: var(--kill-ink); border-color: rgba(229, 50, 45, .55); }
body.veil .btn--danger:hover { background: rgba(229, 50, 45, .14); border-color: var(--kill); color: var(--kill-ink); }
body.veil .chip--clear { background: rgba(240, 41, 143, .16); border-color: rgba(240, 41, 143, .5); color: var(--jev-ink); }
body.veil .chip--watch { background: rgba(245, 180, 0, .14); border-color: rgba(245, 180, 0, .45); color: var(--amber-ink); }
body.veil .chip--kill { background: rgba(229, 50, 45, .14); border-color: rgba(229, 50, 45, .5); color: var(--kill-ink); }
body.veil .chip--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
body.veil .live[data-state='live'] .dot { background: var(--jev); box-shadow: 0 0 0 3px rgba(240, 41, 143, .26); }
body.veil .state[data-kind='ok']::before { background: var(--jev); }
body.veil .bar i { background: var(--jev); }
body.veil .tx-line a, body.veil .tx-line.is-ok, body.veil .tx-line .ok-tick { color: var(--jev-ink); }
body.veil .tx-line.is-fail { color: var(--kill-ink); }
body.veil .verdict-big[data-a='buy'], body.veil .verdict-big[data-a='copy'] { color: var(--jev-ink); }
body.veil .verdict-big[data-a='killed'] { color: var(--kill-ink); }
body.veil .note { background: rgba(245, 180, 0, .09); color: var(--ink); }
body.veil .note.kill { background: rgba(229, 50, 45, .1); }
body.veil :focus-visible { outline: 2px solid var(--jev-ink); }
body.veil .field input { background: #0F0F11; border-color: var(--line); color: var(--ink); }
body.veil .field input:focus-visible { border-color: var(--jev); }
body.veil select {
  border: 1px solid var(--line); border-radius: var(--r); background: #0F0F11; color: var(--ink);
  padding: 10px 13px; font-family: var(--mono); font-size: 14px; min-width: 0; width: 100%;
}
body.veil select:focus-visible { border-color: var(--jev); }
body.veil .skip { background: var(--jev); color: #0B0B0C; }

/* ------------------------------------------------------------------ the head */
.v-head { padding: 52px 0 30px; max-width: 760px; }
.v-head h1 { font-size: clamp(32px, 4.6vw, 52px); }
.v-head .lede { margin-top: 16px; max-width: 58ch; }
.v-truth {
  margin: 22px 0 0; display: grid; gap: 8px; max-width: 64ch;
  font-size: 13.5px; color: var(--muted);
}
.v-truth span { padding-left: 16px; position: relative; }
.v-truth span::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--jev);
}

/* ---------------------------------------------------------------- the steps */
/* One column, five shells, walked in order. A locked shell keeps its header and drops its body:
   nothing is dimmed into unreadability and nothing pretends to be usable before it is. */
.v-steps { display: grid; padding-bottom: 96px; }

 /* a section, so styles.css would otherwise give every shell 88px of air it does not need */
.v-step { padding: 0; border-top: 1px solid var(--line); }
.v-step:last-child { border-bottom: 1px solid var(--line); }

.v-step-head {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 14px;
  align-items: center; padding: 20px 0;
}
.v-step-head > * { min-width: 0; }
.v-step-n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--muted);
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.v-step-head h2 { font-size: 19px; letter-spacing: -.015em; }
.v-step-head .v-step-sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 4px; }

.v-step[data-state='open'] > .v-step-head .v-step-n { border-color: var(--jev); color: var(--jev-ink); }
.v-step[data-state='done'] > .v-step-head .v-step-n { background: var(--jev); border-color: var(--jev); color: #0B0B0C; }
.v-step[data-state='locked'] > .v-step-head h2 { color: var(--muted); }
.v-step[data-state='locked'] > .v-step-body { display: none; }

/* indented to the width of the number, so the five bodies hang off one rail */
.v-step-body { padding: 4px 0 40px 44px; display: grid; gap: 22px; max-width: 924px; }
/* grid children default to min-width auto, which is how the ledger table pushed the whole page
   sideways at 390 before its own scroll container could hold it */
.v-step-body > * { min-width: 0; max-width: 100%; }
/* Fields align by their inputs, not by their bottoms: a help line that wraps must not drag its
   input out of the row. The label is one mono line of 16px plus the field's own 6px gap, which is
   the offset a button beside the fields takes to sit level with the inputs. */
.v-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.v-form > * { min-width: 0; }
.v-form .field { flex: 1 1 250px; }
.v-form .field--sm { flex: 0 1 190px; }
.v-form > button { margin-top: 22px; }
.v-form .err:empty { display: none; }

.v-sub-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------- the plate */
/* The address and the deposit address get read by a phone camera, so the code sits on a real
   white plate. Everything else on this page is ink. */
.v-plate {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 18px;
}
.v-plate > * { min-width: 0; }
.v-qr { background: #FFFFFF; border-radius: 4px; padding: 8px; width: 132px; height: 132px; flex: none; }
.v-qr svg { width: 100%; height: 100%; display: block; }
.v-plate-body { display: grid; gap: 8px; }
.v-addr {
  font-family: var(--mono); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere;
  color: var(--ink);
}
.v-addr--accent { color: var(--jev-ink); }
.v-plate-note { font-size: 12.5px; color: var(--muted); margin: 0; }
@media (max-width: 560px) {
  .v-plate { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 700px) {
  .v-step-body { padding-left: 0; }
  .v-step-head { grid-template-columns: 30px 1fr; gap: 12px; }
  .v-step-head .chip { grid-column: 2; justify-self: start; }
}

/* the amount a visitor has to send, and the clock it has to land inside */
.v-send { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-send > div { display: grid; gap: 5px; }
.v-send .n { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v-send .n--accent { color: var(--jev-ink); }
.v-clock { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.v-clock[data-urgency='soon'] { color: var(--amber-ink); }
.v-clock[data-urgency='gone'] { color: var(--kill-ink); }

/* ------------------------------------------------------------ rows and lists */
.v-rows { display: grid; }
.v-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: 13px 0; border-top: 1px solid var(--line-soft);
}
.v-row:first-child { border-top: 0; }
.v-row > * { min-width: 0; }
.v-row-main { display: grid; gap: 4px; }
.v-row-title { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.v-row-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.v-row-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.v-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.v-pick button {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: var(--r-chip); padding: 6px 13px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.v-pick button:hover { color: var(--ink); border-color: var(--jev); }

.v-ledger-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--mono); }
.v-ledger-tbl th {
  text-align: left; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; padding: 0 14px 10px 0; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.v-ledger-tbl td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; overflow-wrap: anywhere; }
.v-ledger-tbl tr:last-child td { border-bottom: 0; }
.v-ledger-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v-ledger-scroll .v-ledger-tbl { min-width: 620px; }

/* the one place on this page that shouts: a private key in the clear */
.v-reveal {
  border: 1px solid rgba(229, 50, 45, .55); border-left-width: 2px; border-radius: var(--r);
  background: rgba(229, 50, 45, .08); padding: 16px 18px; display: grid; gap: 10px;
}
.v-reveal .warn { color: var(--kill-ink); font-size: 13.5px; margin: 0; }
.v-reveal .key { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; color: var(--ink); }

.v-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; }
.v-toggle input { width: 16px; height: 16px; accent-color: var(--jev); flex: none; margin-top: 3px; }
.v-toggle .t-sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.v-note { font-size: 12.5px; color: var(--muted); max-width: 66ch; margin: 0; }

/* space held before the asynchronous blocks land, so the step below does not jump */
#fund-assets { min-height: 74px; }
#snipe-picks { min-height: 34px; }
#ledger-host { min-height: 120px; }

@media (prefers-reduced-motion: reduce) {
  body.veil * { transition: none !important; animation: none !important; }
}