/* The rows accounts/accounts.js builds (one per Kokomoji: .tok with its picture, account, lights, buttons, and the
   feed and top up forms), their buttons (.btn), fields and status lines. Shared by the token accounts page and the
   homepage's sun TV when it switches to the account channel; each page frames the rows its own way. Paths are relative
   to this file (home/). */
.tokrows, .ac { --ok: #8ff0c0; --warn: #ffb35c; }

/* buttons: the keypad's key, one texture, one colour (#453A5C) */
.btn {
  display: inline-grid; place-items: center; cursor: pointer; white-space: nowrap; text-decoration: none;
  border-style: solid; border-width: 0; border-color: transparent;
  border-image: url(art/key.webp) 52 fill / calc(var(--u) * 1.1) stretch;
  background: none; color: var(--moon);
  font: 800 calc(var(--u) * .78)/1 var(--label); letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 calc(var(--u) * .5) rgba(239, 232, 255, .25);
  padding: calc(var(--u) * .75) calc(var(--u) * 1.3);
  transition: transform .08s, filter .12s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { filter: brightness(1.14); color: var(--moon); }
.btn:active { transform: translateY(2px); filter: brightness(.92); }
.btn:focus-visible { outline: none; filter: brightness(1.18) drop-shadow(0 0 calc(var(--u) * .5) rgba(236, 48, 19, .8)); }
.btn:disabled { opacity: .45; cursor: default; filter: saturate(.4); transform: none; }
/* the main action of a row (Activate, Top up agent, Send) carries the red */
.btn:not(.ghost) { color: #ffd9d2; text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 calc(var(--u) * .6) rgba(236, 48, 19, .8); }
.btn.ghost { color: var(--lilac); }

/* fields (the finder's number, and the feed and top up forms): LCD glass with signal red letters */
.field {
  min-width: 0; outline: none; color: var(--red); caret-color: var(--red);
  font: 800 calc(var(--u) * .95)/1.2 var(--label); letter-spacing: .06em;
  padding: calc(var(--u) * .55) calc(var(--u) * .75);
  border-style: solid; border-width: 0; border-color: transparent; background: none;
  border-image: url(art/lcd.webp) 46 fill / calc(var(--u) * .3847) / calc(var(--u) * .1672) stretch;
  text-shadow: 0 0 calc(var(--u) * .45) rgba(236, 48, 19, .6);
}
.field::placeholder { color: rgba(236, 48, 19, .32); text-shadow: none; }
.field:focus { box-shadow: 0 0 0 1px rgba(236, 48, 19, .45), 0 0 calc(var(--u) * 1) rgba(236, 48, 19, .25); }
input[type=number].field { -moz-appearance: textfield; appearance: textfield; }
input[type=number].field::-webkit-inner-spin-button, input[type=number].field::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.status { font: 400 calc(var(--u) * .74)/1.5 var(--mono); min-height: 1.5em; color: var(--dim); overflow-wrap: anywhere; }
.status:empty { min-height: 0; }
.status.err { color: #ff7a63; }
.status.ok { color: var(--ok); }
.status a { color: inherit; }
.empty { font-size: calc(var(--u) * .78); color: var(--dim); padding: calc(var(--u) * .8) calc(var(--u) * 1); }
.h2 { margin: 0; font: 800 calc(var(--u) * .72)/1.2 var(--label); letter-spacing: .24em; text-transform: uppercase; color: rgba(221, 218, 255, .62); }

.band { display: flex; align-items: center; gap: 1em; }
.band::before, .band::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(205, 184, 255, .3), transparent); }

.tok {
  position: relative; display: grid; grid-template-columns: calc(var(--u) * 6.4) minmax(0, 1fr); gap: 0 calc(var(--u) * 1.1); align-items: center;
}
.tok > * { position: relative; z-index: 1; min-width: 0; }
.tok .thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block; image-rendering: pixelated;
  border-radius: calc(var(--u) * .5); background: #07040c;
  box-shadow: 0 0 0 1px rgba(205, 184, 255, .18), 0 0 calc(var(--u) * 1.2) rgba(176, 38, 255, .18);
}
.tok .tname { font: 800 calc(var(--u) * 1.05)/1.2 var(--label); letter-spacing: .06em; color: var(--moon); text-shadow: 0 0 calc(var(--u) * .5) rgba(239, 232, 255, .25); overflow-wrap: anywhere; }
.tok .acct { margin-top: calc(var(--u) * .35); display: flex; gap: .6em; align-items: center; flex-wrap: wrap; font-size: calc(var(--u) * .74); color: var(--dim); }
.tok .acct a { color: var(--lilac); text-decoration: none; border-bottom: 1px dotted rgba(205, 184, 255, .35); }
.tok .acct a:hover { color: var(--moon); border-bottom-color: var(--red); }
.copy {
  cursor: pointer; background: none; color: var(--dim); padding: .15em .55em;
  border: 1px solid rgba(205, 184, 255, .25); border-radius: 3px;
  font: 800 calc(var(--u) * .56)/1.3 var(--label); letter-spacing: .16em;
}
.copy:hover, .copy:focus-visible { color: var(--moon); border-color: var(--red); outline: none; }
.tok .meta { margin-top: calc(var(--u) * .45); display: flex; gap: .4em 1em; align-items: center; flex-wrap: wrap; font-size: calc(var(--u) * .74); color: rgba(221, 218, 255, .78); }
.pill {
  font: 800 calc(var(--u) * .56)/1 var(--label); letter-spacing: .18em; text-transform: uppercase;
  padding: .45em .7em .4em; border-radius: 3px; border: 1px solid currentColor;
}
.pill::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .55em; border-radius: 50%; background: currentColor; box-shadow: 0 0 .6em currentColor; vertical-align: .05em; }
.pill.on { color: var(--ok); }
.pill.off { color: var(--warn); }
.pill.off::before { animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.tok .act { grid-column: 1 / -1; display: flex; gap: calc(var(--u) * .6); flex-wrap: wrap; }
.tok .act:not(:empty) { margin-top: calc(var(--u) * 1); }
.tok .xfer { grid-column: 1 / -1; display: grid; gap: calc(var(--u) * .6); margin-top: calc(var(--u) * 1); padding-top: calc(var(--u) * .9); border-top: 1px dashed rgba(205, 184, 255, .22); }
.xfer .xtitle { margin: 0; font: 800 calc(var(--u) * .72)/1.2 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--lilac); }
.xfer .hint { font-size: calc(var(--u) * .74); line-height: 1.55; color: var(--dim); }
.xfer .xrow { display: flex; gap: calc(var(--u) * .6); flex-wrap: wrap; align-items: stretch; }
.xfer .field.addr { flex: 1 1 100%; font-size: calc(var(--u) * .78); }
.xfer .field.amt { flex: 1 1 6em; width: 6em; }
.tok .rstat { grid-column: 1 / -1; }
.tok .rstat:not(:empty) { margin-top: calc(var(--u) * .7); }