/* /app — the wallet hub. The step/controls grammar is the stake page's
   (page-stake.css); restated here because per-page sheets do not import. */

.aw-flow {
  margin: 0; padding: 0; list-style: none; counter-reset: stkstep;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); box-shadow: var(--shadow-card);
}
.stk-step {
  counter-increment: stkstep;
  position: relative;
  padding: var(--s5) var(--s5) var(--s5) calc(var(--s5) + 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.stk-step:last-child { border-bottom: none; }
.stk-step::before {
  content: counter(stkstep, decimal-leading-zero);
  position: absolute; left: var(--s5); top: var(--s5);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  line-height: 1.35; color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
}
/* h2, not h3: these are the page's only sections under its h1, and skipping a
   level to reach them is the one thing axe still flagged here. Kept at the h3
   type size — the change is document structure, not typography. */
.stk-step h2 {
  margin: 0 0 var(--s2); font-size: var(--fs-h3);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}
.stk-step p { margin: 0; max-width: 62ch; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 560px) {
  .stk-step { padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 2.2rem); }
  .stk-step::before { left: var(--s4); top: var(--s4); }
}

.dg-state {
  font-family: var(--font-text); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
  font-variant-numeric: tabular-nums lining-nums;
}
.dg-state:empty { display: none; }
.dg-state.is-done { color: var(--pos); }
.dg-control {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s3) var(--s4);
  margin: var(--s4) 0 0;
}
/* the class display rules below would otherwise beat the UA's [hidden] rule —
   the bug that left the journey skeleton and the paste-ID field visible at load */
[hidden] { display: none !important; }
.dg-status:empty { display: none; }
.dg-status.ok { color: var(--pos); }
.dg-status.bad { color: var(--neg); }
.dg-alt {
  margin: var(--s4) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: 0.83rem; color: var(--ink-3); max-width: 62ch;
}
#aw-wallets { display: flex; flex-wrap: wrap; gap: var(--s3); }
#aw-wallets:empty { display: none; }
.sw-wallet-btn { display: inline-flex; align-items: center; gap: .45rem; }
.sw-wallet-btn img { display: block; border-radius: 3px; }

/* ── the position ──────────────────────────────────────────────────────── */
.aw-dash {
  margin: var(--s4) 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-3); overflow: hidden;
}
.aw-dash > div { padding: var(--s3) var(--s4); border-right: 1px solid var(--rule); }
.aw-dash > div:last-child { border-right: none; }
.aw-dash dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: .2rem;
}
.aw-dash dd {
  margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
@media (max-width: 680px) {
  .aw-dash { grid-template-columns: 1fr 1fr; }
  .aw-dash > div:nth-child(2n) { border-right: none; }
  .aw-dash > div { border-bottom: 1px solid var(--rule); }
  .aw-dash > div:last-child { border-bottom: none; }
}
.aw-delegs { margin: var(--s3) 0 0; font-size: 0.88rem; color: var(--ink-2); }
.aw-delegs ul { margin: var(--s2) 0 0; font-size: 0.84rem; }
.aw-delegs .gold { color: var(--accent); }
.aw-delegs p { margin: 0; }

/* ── the reward streams ────────────────────────────────────────────────── */
.aw-rewards {
  margin: var(--s4) 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); overflow: hidden;
}
.aw-reward { padding: var(--s4); border-right: 1px solid var(--rule); }
.aw-reward:last-child { border-right: none; }
@media (max-width: 900px) {
  .aw-rewards { grid-template-columns: 1fr; }
  .aw-reward { border-right: none; border-bottom: 1px solid var(--rule); }
  .aw-reward:last-child { border-bottom: none; }
}
.aw-r-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.aw-r-head b { font-size: 0.92rem; }
.aw-r-amt {
  font-family: var(--font-display); font-weight: 600; color: var(--accent-deep, var(--accent));
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.aw-reward p { font-size: 0.84rem; color: var(--ink-3); }
.aw-all { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.aw-wrap-opt { font-size: 0.86rem; color: var(--ink-2); display: inline-flex; gap: .45rem; align-items: center; }
.aw-fassets { margin-top: var(--s5); }

/* ── shared with the stake page (restated: per-page sheets do not import) ── */
/* ── the journey: FLR moving chain → chain while the reader waits ──────────
   Three stations, two tracks. Track states: .is-await (marching dashes — a
   signature is waiting in the wallet), .is-flow (coins travelling — submitted,
   the chain is working), .is-done (solid accent). Stations: .is-active (this is
   where the action is) and .is-done (✓). Motion is decorative — the status line
   carries the words — and switches off under prefers-reduced-motion. */
.sw-journey {
  margin: var(--s4) 0 0;
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto;
  align-items: center;
  gap: var(--s3);
}
.sj-station {
  text-align: center;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  min-width: 6.2rem;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.sj-station b { display: block; font-size: 0.82rem; color: var(--ink); }
.sj-station span {
  display: block;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
.sj-station.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.sj-station.is-done { background: var(--paper-3); border-color: var(--accent); }
.sj-station.is-done b::after { content: " ✓"; color: var(--pos); }
.sj-station.is-celebrate { animation: sj-cheer 0.7s ease-out 3; }
@keyframes sj-cheer {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.sj-track { position: relative; height: 10px; }
.sj-lane {
  position: absolute; left: 0; right: 0; top: 4px; height: 2px;
  background: var(--rule-2);
}
.sj-track.is-await .sj-lane {
  background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 14px);
  background-size: 14px 2px;
  animation: sj-march 0.9s linear infinite;
}
@keyframes sj-march { to { background-position: 14px 0; } }
.sj-track.is-done .sj-lane { background: var(--accent); }
.sj-track i {
  position: absolute; top: 0; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, #000 8%);
  opacity: 0;
}
.sj-track.is-flow i { animation: sj-coin 1.5s linear infinite; }
.sj-track.is-flow i:nth-child(3) { animation-delay: 0.5s; }
.sj-track.is-flow i:nth-child(4) { animation-delay: 1s; }
@keyframes sj-coin {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 9px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-track i, .sj-track.is-flow i { animation: none; opacity: 0; }
  .sj-track.is-await .sj-lane { animation: none; }
  .sj-station.is-celebrate { animation: none; }
  /* state stays legible without motion: an active lane reads as accent */
  .sj-track.is-flow .sj-lane { background: var(--accent); opacity: .55; }
}
@media (max-width: 560px) {
  .sj-station { min-width: 0; padding: var(--s2); }
  .sj-station span { display: none; } /* names still carry the meaning */
}

/* ── the send-off dialog: the unlock date, un-missable ─────────────────────── */
.sw-done {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  padding: var(--s6);
  max-width: 30rem;
  box-shadow: var(--shadow-card);
}
.sw-done::backdrop { background: rgba(10, 10, 8, 0.55); }
.sw-done-eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pos);
}
.sw-done h3 { margin: 0 0 var(--s3); font-size: var(--fs-h3); }
.sw-done-when { margin: 0 0 var(--s2); font-size: 0.95rem; color: var(--ink-2); }
.sw-done-when b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sw-done-sub { margin: 0 0 var(--s4); font-size: 0.85rem; color: var(--ink-3); overflow-wrap: anywhere; }
.sw-done .cta-row { margin-bottom: var(--s3); }
.sw-done-close {
  background: none; border: none; padding: 0;
  font-size: 0.82rem; color: var(--ink-3);
  text-decoration: underline; cursor: pointer;
}
.sw-done-close:hover { color: var(--ink); background: none; }
.dg-field { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 160px; max-width: 17rem; min-width: 0; }
.dg-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
}
.dg-field input, .dg-field select { width: 100%; }
.dg-control button { flex: 0 0 auto; }
.dg-control .dg-status { flex: 1 1 14rem; margin: 0; }

.dg-field input, .dg-field select { width: 100%; }
.aw-flow input:disabled, .aw-flow select:disabled, .aw-flow button:disabled,
.aw-flow button:disabled:hover {
  background: var(--paper-3); color: var(--ink-3);
  border-color: var(--rule-2); cursor: not-allowed;
}

/* the node picker earns more room than a numeric field; labels stay one line */
#aw-node { max-width: 100%; }
.aw-flow .dg-field:has(#aw-node) { flex: 1 1 240px; max-width: 24rem; }
.dg-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* buttons share the input's height line under flex-end */
.dg-control > button { margin-bottom: 1px; }
@media (max-width: 560px) {
  .dg-field, .aw-flow .dg-field:has(#aw-node) { max-width: 100%; flex: 1 1 100%; }
}

/* the node picker reads as a table: mono font makes the NBSP-padded columns
   (name · fee · ends) line up in the list and in the closed control alike */
#aw-node, #aw-node option, #aw-node optgroup { font-family: var(--font-mono); font-size: 0.78rem; }
#aw-node optgroup { color: var(--ink-4); font-style: normal; }

/* ── the validator combobox: a real panel, columns on a grid ─────────────── */
.aw-flow .dg-field:has(#aw-node) { position: relative; }
/* The panel hangs off the field, but the field is inset by the step gutter — so a
   width measured against the viewport (the old 92vw) ran off the right edge and gave
   the whole page a sideways scroll: ~40px on a phone, 6px in the 561–567 band where
   the gutter is widest relative to the screen. Subtracting the gutter's worst case
   (~7rem, from 70px on a phone to 106px at 1024) keeps the panel on screen at every
   width; 30rem still wins on anything desktop-sized, where the cap never binds. */
.aw-combo {
  position: absolute; top: 100%; left: 0; z-index: 30;
  margin-top: .3rem; width: min(30rem, calc(100vw - 7rem));
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--paper-2); box-shadow: 0 8px 28px rgba(22, 20, 15, .14);
}
#aw-combo-search {
  width: 100%; border: none; border-bottom: 1px solid var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: .55rem .7rem; font: inherit; background: var(--paper-2); color: var(--ink);
}
#aw-combo-search:focus { outline: none; border-bottom-color: var(--accent); }
.aw-combo-list { max-height: 19rem; overflow-y: auto; overscroll-behavior: contain; }
.aw-row, .aw-row-h {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem 6.2rem;
  gap: .6rem; align-items: baseline;
  padding: .34rem .7rem;
}
.aw-row { cursor: pointer; font-size: .84rem; color: var(--ink-2); }
.aw-row:hover { background: var(--paper-3); color: var(--ink); }
.aw-row.is-sel { background: var(--paper-3); box-shadow: inset 3px 0 0 var(--accent); }
/* the keyboard cursor. Distinct from .is-sel (what is currently chosen) because
   arrowing through the list moves this without choosing anything, and a reader
   who cannot see the pointer needs the two states to look different. */
.aw-row.is-active { background: var(--paper-3); outline: 2px solid var(--accent); outline-offset: -2px; }
.aw-row.is-active .c-name { color: var(--ink); }
.aw-row.is-ours .c-name { color: var(--accent-deep, var(--accent)); font-weight: 600; }
.aw-row .c-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.aw-row .c-fee { text-align: right; font-variant-numeric: tabular-nums; }
.aw-row .c-end { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.aw-row-h {
  display: grid;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
  padding-top: .6rem; border-top: 1px solid var(--rule);
}
.aw-combo-list > .aw-row-h:first-child { border-top: none; }
.aw-row-other { border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .8rem; }

/* Must sit AFTER the .aw-row rules above, not up beside .aw-combo: a media query adds
   no specificity, so an equally-specific rule later in the file beats it regardless of
   the query. (It does — the first attempt at this silently did nothing.)
   Below the breakpoint the field is already full width, so matching it beats the cap —
   the panel lines up with the closed control instead of sitting narrower and offset —
   and the narrower panel has to buy the name column back: a header laid on the same
   three columns wrapped its label to three lines, and fee/date were sized for a panel
   70px wider than this one, so every pixel they give up is a name not elided. */
@media (max-width: 560px) {
  .aw-combo { width: 100%; }
  .aw-row-h { grid-template-columns: 1fr; }
  .aw-row { grid-template-columns: minmax(0, 1fr) 2.6rem 5rem; font-size: .78rem; }
  .aw-row, .aw-row-h { gap: .4rem; padding-left: .5rem; padding-right: .5rem; }
  /* a date is one token — let it set the column, never wrap inside it */
  .aw-row .c-fee, .aw-row .c-end { white-space: nowrap; }
}
/* At 320px the panel is ~216px and a name cannot both fit and stay on one line,
   so ellipsis was hiding the only thing that identifies a validator. Wrapping
   costs a little height and keeps every name readable; fee and date stay pinned
   to their columns, top-aligned against the taller cell. */
@media (max-width: 360px) {
  .aw-row { align-items: start; }
  .aw-row .c-name { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  /* "Delegate to Seraphim FTSO" is wider than a 320px column, and `flex: 0 0 auto`
     let it sit 0.7px past the edge — enough to make the whole page scroll
     sideways. Let the long labels wrap rather than push. */
  .aw-flow .dg-control button { max-width: 100%; white-space: normal; }
}