/* ═══ stake — page-specific layout ════════════════════════════════════════
   Loaded after /style.css on /stake. Consumes the shared tokens (BRIEF §1) and
   restates no shared component (BRIEF §5.2): the record plate, the rank bar, the
   table frame, `.figure-plate`, `.faq`, `.callout` and `.call` all come from the
   system. What lives here is the two things this page genuinely adds — a record
   plate standing beside a live node register, and a P-chain walkthrough whose
   steps carry the node IDs you have to paste.                                 */

/* ── the pitch row: rate plate + node panel, side by side ─────────────────── */
.stk-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: var(--s5) var(--s6);
  /* the two plates are one register in two halves: they share a top rule and a bottom
     one. Stretching (rather than top-aligning) keeps the node panel from leaving a
     ragged column of paper under it when the record plate runs longer. */
  align-items: stretch;
  margin-bottom: var(--s7);
}
@media (max-width: 980px) {
  .stk-top { grid-template-columns: 1fr; gap: var(--s5); }
}

/* the rank sits directly under the APR, so the plate reads "this much, at this
   position in the field" in one movement */
.stk-record .record-figure { margin-bottom: var(--s3); }
.stk-rank-line {
  margin: 0 0 var(--s3);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em;
}
.stk-rank-line .of {
  font-family: var(--font-text); font-size: 0.78rem; font-weight: 500;
  letter-spacing: .01em; color: var(--ink-3); margin-left: .45rem;
}
.stk-record .rank-bar { margin-top: var(--s4); }
.stk-record-sub {
  margin: var(--s4) 0 0; font-size: 0.84rem; color: var(--ink-3); max-width: 52ch;
}
.stk-record-sub code { font-size: .95em; }

/* ── the node register ────────────────────────────────────────────────────
   A figure, not a data page: `.figure-plate` supplies the paper, the rule and the
   captioned foot; the frame inside it is the shared table pane, re-anchored so it
   scrolls within the plate instead of bleeding to the viewport width.           */
.stk-nodes {
  margin: 0; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* the caption is the plate's foot — it sits on the bottom rule however tall the plate
   is stretched, the way `.record-foot` does on the plate beside it */
.stk-nodes figcaption { margin-top: auto; }

/* the fleet strip — the same "single bordered grid, no gutters" device as `.cards`
   (BRIEF §2.3), sized down to sit inside a figure plate rather than across the page */
.stk-fleet {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; border-bottom: 1px solid var(--rule);
}
/* figure first, label under — the same reading order as `.record-row` (which gets it
   from `flex-direction: column-reverse`), so the two panels scan identically */
.stk-fleet > div {
  display: flex; flex-direction: column-reverse; gap: .3rem;
  padding: var(--s4) var(--s4) var(--s4);
  border-right: 1px solid var(--rule);
}
.stk-fleet > div:last-child { border-right: none; }
.stk-fleet dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.stk-fleet dd {
  margin: 0; font-family: var(--font-display);
  font-size: 1.28rem; font-weight: 600; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em;
}
.stk-fleet dd.ok { color: var(--pos); }
.stk-fleet dd.warn { color: var(--caution); }
.stk-fleet dd.bad { color: var(--neg); }
.stk-fleet dd .u {
  display: block; font-family: var(--font-text); font-size: 0.72rem;
  font-weight: 400; letter-spacing: 0; color: var(--ink-4); margin-top: .2rem;
}
@media (max-width: 420px) {
  .stk-fleet { grid-template-columns: 1fr 1fr; }
  .stk-fleet > div:nth-child(2n) { border-right: none; }
  .stk-fleet > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.stk-nodes .table-frame,
.stk-nodes .table-frame.stk-frame {
  --bleed: 100%;
  width: 100%; margin: 0;
  /* takes the slack when the plate is stretched to the record's height, so the spare
     paper sits inside the ruled pane rather than as a gap under it */
  flex: 1 1 auto;
}
.stk-nodes .table-wrap {
  border: none; border-radius: 0;
  max-height: none; height: 100%;
  border-bottom: 1px solid var(--rule);
}
.stk-nodes .table-frame::after { content: none; }
.stk-nodes table { border: none; border-radius: 0; background: transparent; }
/* the plate is a panel, not the full-width register: the cells give back the padding
   the shared table spends on a page-wide layout so five columns fit without scrolling */
.stk-nodes th, .stk-nodes td { padding: .5rem .55rem; white-space: nowrap; }
.stk-nodes th:first-child, .stk-nodes td:first-child { padding-left: var(--s4); }
.stk-nodes th:last-child, .stk-nodes td:last-child { padding-right: var(--s4); }
.stk-nodes th { background: var(--paper-3); cursor: default; }
.stk-nodes td code {
  font-size: 0.78rem; color: var(--ink-2);
  background: none; border: none; padding: 0;
}
.stk-nodes td b {
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.stk-nodes td b.ok { color: var(--pos); }
.stk-nodes td b.warn { color: var(--caution); }
.stk-nodes td b.bad { color: var(--neg); }
.stk-nodes td .pill { margin-left: 0; }
/* the shared rule demotes a pill inside a data cell to metadata; here the pill *is*
   the value of its column, so it keeps its own frame and its semantic tint */
.stk-nodes td .pill.ok {
  border: 1px solid rgba(31,107,70,.4); color: var(--pos);
  background: rgba(31,107,70,.07); padding: .06rem .48rem; font-size: var(--fs-micro);
}
.stk-nodes td .pill.bad {
  border: 1px solid rgba(156,58,44,.4); color: var(--neg);
  background: rgba(156,58,44,.07); padding: .06rem .48rem; font-size: var(--fs-micro);
}
.stk-nodes figcaption { border-top: none; }
.stk-nodes figcaption code { overflow-wrap: anywhere; }
/* the head strip is the shared `.record-head`; only the plate's own paper differs */
.stk-nodes .record-head { padding: var(--s4) var(--s5) var(--s3); }
.stk-nodes .table-scroll-hint { padding: var(--s3) var(--s4) 0; margin: 0; }
.stk-nodes-out { margin: 0; }
@media (max-width: 760px) {
  .stk-nodes .table-scroll-hint { display: block; }
}

/* ── the two-stream key ───────────────────────────────────────────────────── */
.stk-how-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: var(--s6); align-items: start;
}
@media (max-width: 900px) { .stk-how-grid { grid-template-columns: 1fr; gap: var(--s5); } }
.stk-how-prose p { margin: 0 0 var(--s4); max-width: var(--measure); }
.stk-how-prose p:last-child { margin-bottom: 0; }

.stk-key {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); overflow: hidden;
}
.stk-col { padding: var(--s4) var(--s5); border-right: 1px solid var(--rule); }
.stk-col:last-child { border-right: none; }
.stk-col h4 { margin: 0 0 var(--s3); color: var(--accent); }
.stk-col dl { margin: 0; }
.stk-col dl > div { padding: .5rem 0; border-top: 1px solid var(--rule); }
.stk-col dl > div:first-child { border-top: none; padding-top: 0; }
.stk-col dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: .15rem;
}
.stk-col dd { margin: 0; font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; }
@media (max-width: 480px) {
  .stk-key { grid-template-columns: 1fr; }
  .stk-col { border-right: none; border-bottom: 1px solid var(--rule); }
  .stk-col:last-child { border-bottom: none; }
}
.stk-how-note { margin: var(--s5) 0 0; font-size: 0.88rem; color: var(--ink-3); }

/* ── the P-chain walkthrough ─────────────────────────────────────────────── */
.stk-flow {
  margin: var(--s5) 0 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;
}
.stk-step h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); }
.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); }
}

/* the node IDs, printed in full because the reader has to copy one */
.stk-ids { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.stk-ids li {
  background: var(--paper-3); border: 1px solid var(--rule); border-radius: 2px;
  padding: .38rem .6rem;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.stk-ids code {
  font-size: 0.78rem; color: var(--ink-2);
  background: none; border: none; padding: 0; white-space: nowrap;
}
.stk-ids-out { margin: var(--s3) 0 0; font-size: 0.88rem; color: var(--ink-3); }

/* ── FAQ + the ask ───────────────────────────────────────────────────────── */
.stk-faq { margin-top: var(--s8); }
.stk-faq .faq {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); overflow: hidden; margin-top: var(--s5);
}
.stk-faq .faq-item {
  padding: var(--s5);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.stk-faq .faq-item:nth-child(2n) { border-right: none; }
.stk-faq .faq-item:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 820px) {
  .stk-faq .faq { grid-template-columns: 1fr; }
  .stk-faq .faq-item { border-right: none; border-bottom: 1px solid var(--rule); }
  .stk-faq .faq-item:last-child { border-bottom: none; }
}
.stk-faq .faq-item h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); }
.stk-faq .faq-item p { margin: 0; font-size: 0.94rem; color: var(--ink-2); max-width: 62ch; }
.stk-faq .faq-item .callout { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); font-size: 0.88rem; }

.stk-call .cta-row { flex-wrap: wrap; }

/* ── stake-from-this-page: the on-site widget ──────────────────────────────
   The controls reuse the delegate widget's grammar (see page-delegate.css):
   the same field/label/state/status classes, restated here because per-page
   stylesheets do not import each other. */
.stk-live { margin-top: var(--s8); }
.stk-live-lede { max-width: var(--measure); font-size: 0.94rem; color: var(--ink-2); margin: 0 0 var(--s5); }

.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); }
.stk-step.is-done { background: var(--paper-3); }
.stk-step.is-done::before { color: var(--pos); }
.stk-live-flow .stk-step h3 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}

.dg-control {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s3) var(--s4);
  margin: var(--s4) 0 var(--s3);
}
.dg-field { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 160px; 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; }
/* the delegate page styles text/number/select globally; date is this page's addition */
.stk-live input[type=date] {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-2); border-radius: 2px; padding: .45rem .55rem;
}
.stk-live input:disabled, .stk-live select:disabled, .stk-live button:disabled,
.stk-live button:disabled:hover {
  background: var(--paper-3); color: var(--ink-3);
  border-color: var(--rule-2); cursor: not-allowed;
}
#sw-balances span { margin-right: var(--s4); white-space: nowrap; }
.dg-note { margin: 0 0 var(--s3); font-size: 0.84rem; color: var(--caution); max-width: 60ch; }
.dg-note:empty { display: none; }
.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;
}

/* the copy button that rides each node ID row */
.stk-ids li { display: flex; align-items: center; gap: var(--s3); }
.stk-ids code { flex: 1 1 auto; min-width: 0; }
.stk-copy {
  flex: 0 0 auto;
  font-size: 0.72rem; padding: .18rem .5rem; line-height: 1.4;
}

/* the head's jump to the on-page flow */
.stk-head-cta { margin-top: var(--s5); }

/* the EIP-6963 wallet chooser: one button per announced extension wallet */
#sw-wallets { display: flex; flex-wrap: wrap; gap: var(--s3); }
#sw-wallets:empty { display: none; }
.sw-wallet-btn { display: inline-flex; align-items: center; gap: .45rem; }
.sw-wallet-btn img { display: block; border-radius: 3px; }

[hidden] { display: none !important; } /* class display rules must not beat the hidden attribute */

/* ── 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; }