/* /stake/ — additions to the board's styles.css. Same tokens, no new colours:
   teal marks progress and what is yours, copper the brand and the step you are on,
   amber a caution. */

/* Anything carrying the hidden attribute stays hidden, whatever display a class gives it. */
[hidden] { display: none !important; }

.brand-link { text-decoration: none; color: inherit; }

.wallet-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel);
  font: 500 12px/1 var(--mono); color: var(--ink);
}
.wallet-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.stake-hero { padding-block: 44px 8px; display: grid; gap: 16px; }
@media (min-width: 760px) { .stake-hero { padding-block: 64px 12px; } }
.stake-hero h1 { font-size: clamp(30px, 6vw, 52px); max-width: 20ch; letter-spacing: -0.038em; font-weight: 700; line-height: 1.05; }
.stake-lede { margin: 0; color: var(--ink-2); max-width: 66ch; font-size: clamp(15px, 1.7vw, 16.5px); line-height: 1.65; }
.stake-who { margin: 0; color: var(--ink-3); max-width: 66ch; font-size: 13.5px; line-height: 1.6; border-left: 2px solid var(--line-3); padding-left: 12px; }
.stake-hops { margin-top: 8px; }
@media (min-width: 760px) { .stake-hops { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.notlive { margin-top: 14px; border-color: var(--amber-mid); }

.route-steps { list-style: none; margin: 24px auto 0; display: grid; gap: 14px; }
.step { min-width: 0; transition: opacity 160ms var(--ease); }
.step[data-state="locked"] { opacity: 0.45; }
.step[data-state="locked"] :is(button, input, a.btn) { pointer-events: none; }
.step[data-state="done"] { border-color: var(--green-mid); }
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-head h2 { font-size: 18px; letter-spacing: -0.02em; }
.rs-n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
  border: 1px solid var(--line-2); background: var(--panel-2);
  font: 600 12px/1 var(--mono); color: var(--ink-2);
}
.step[data-state="active"] .rs-n { color: var(--copper-txt); border-color: var(--copper-mid); background: var(--copper-dim); }
.step[data-state="done"] .rs-n { color: var(--green); border-color: var(--green-mid); background: var(--green-dim); }
.step-p { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; max-width: 72ch; }
.step-p.small { font-size: 12px; color: var(--ink-3); }
.step-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.step-note { font: 400 12.5px/1.5 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); min-width: 0; overflow-wrap: anywhere; }
.step-note[data-tone="ok"] { color: var(--green); }
.step-note[data-tone="bad"] { color: var(--red); }
.step-note[data-tone="warn"] { color: var(--amber-txt); }
.step-note a { color: var(--green-txt); }

.kv { margin: 14px 0 0; display: grid; gap: 8px; }
.kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.kv dt { font-size: 13px; color: var(--ink-3); }
.kv dd { margin: 0; text-align: right; font-size: 13.5px; overflow-wrap: anywhere; }
.kv-review { margin: 4px 0 12px; }
.kv-total { border-bottom: 0 !important; }
.kv-total { padding-top: 4px; }
.kv-total dt, .kv-total dd { color: var(--copper-txt); font-weight: 650; font-size: 15px; }

.skel { display: inline-block; width: 72px; height: 11px; border-radius: 3px; background: linear-gradient(90deg, var(--panel-2), var(--line), var(--panel-2)); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .skel { animation: skel 1.2s linear infinite; } }
@keyframes skel { to { background-position: -200% 0; } }

.choice { border: 0; margin: 4px 0 14px; padding: 0; display: grid; gap: 8px; }
.direction-toggle { margin-top: 2rem; margin-bottom: 0; }
.choice-opt {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.choice-opt:hover { border-color: var(--line-2); }
.choice-opt:has(input:checked) { border-color: var(--green-mid); background: linear-gradient(var(--green-dim), var(--green-dim)), var(--canvas); }
.choice-opt input { accent-color: var(--green); margin-top: 3px; width: 16px; height: 16px; flex: none; }
.choice-opt span { display: grid; gap: 3px; min-width: 0; }
.choice-opt b { font-size: 14px; }
.choice-opt i { font-style: normal; color: var(--ink-2); font-size: 12.5px; }

.field { display: grid; gap: 6px; margin: 4px 0 6px; }
.field > span:first-child { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field input {
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
  font: 500 14px/1 var(--mono);
  transition: border-color 140ms, box-shadow 140ms;
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { border-color: var(--green-mid); box-shadow: 0 0 0 4px rgba(44, 202, 181, 0.08); outline: none; }
.field input[aria-invalid="true"] { border-color: var(--red); }
.field-row { display: flex; gap: 8px; }
.field-row .btn { min-height: 44px; }
.field-sm { max-width: 260px; margin-top: 12px; }

.sign-warn { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--amber-mid); border-radius: var(--r-sm); background: var(--amber-dim); font-family: var(--sans); color: var(--ink-2); font-size: 12.5px; max-width: 76ch; }
.sign-warn strong { color: var(--amber-txt); }

.ck-result { margin-top: 14px; display: grid; gap: 12px; }
.addr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.addr-row code { font-size: 12.5px; color: var(--green); overflow-wrap: anywhere; min-width: 0; }

.phrase { display: grid; gap: 10px; }
.phrase .btn { justify-self: start; }
.phrase-words {
  margin: 0; padding: 12px; list-style: none; counter-reset: w;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px;
  border: 1px solid var(--red-mid); border-radius: var(--r); background: var(--bg);
  font: 500 13px/1.5 var(--mono); user-select: all;
}
@media (min-width: 620px) { .phrase-words { grid-template-columns: repeat(4, 1fr); } }
.phrase-words li { counter-increment: w; }
.phrase-words li::before { content: counter(w) ". "; color: var(--ink-3); }
.ack { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); cursor: pointer; max-width: 76ch; }
.ack input { accent-color: var(--green); margin-top: 2px; width: 16px; height: 16px; flex: none; }

.track { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.track li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); transition: border-color 200ms; }
.track b { font-size: 13.5px; }
.track span { font: 400 12px/1.5 var(--mono); color: var(--ink-3); text-align: right; overflow-wrap: anywhere; }
.track li[data-s="busy"] { border-color: var(--amber-mid); }
.track li[data-s="busy"] span { color: var(--amber-txt); }
.track li[data-s="ok"] { border-color: var(--green-mid); }
.track li[data-s="ok"] span { color: var(--green); }
.track li[data-s="bad"] { border-color: var(--red-mid); }
.track li[data-s="bad"] span { color: var(--red); }
#track-links a { color: var(--green-txt); }

.trust-grid { display: grid; gap: 12px; }
@media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-grid h3 { font-size: 15px; margin-bottom: 8px; }
.trust-grid a { color: var(--green-txt); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.resume { margin: 14px 0 0; border-color: var(--amber-mid); }
.resume .step-row { margin-top: 10px; }
.resume .step-note a { color: var(--green-txt); }
.addr-row.via code { color: var(--ink-2); }

/* ── polish ───────────────────────────────────────────────────────────────── */

.step[data-state="active"] {
  border-color: rgba(44, 202, 181, 0.32);
  box-shadow: var(--shadow), 0 0 0 1px rgba(44, 202, 181, 0.10) inset, 0 0 48px -16px rgba(44, 202, 181, 0.22);
}
.step { transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), opacity 300ms var(--ease); }

.stake-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #f0ae80 0%, var(--copper) 45%, #c4683a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.06em; margin-right: -0.06em;
}

/* Review acknowledgment block */
.review-ack {
  margin: 18px 0 20px; padding: 20px;
  border: 1px solid var(--copper-mid); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--copper-dim), rgba(219, 134, 81, 0.02));
}
.review-ack h3 { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper-txt); margin-bottom: 14px; }
.ack-address { display: flex; align-items: stretch; gap: 8px; margin-bottom: 16px; }
.huge-address {
  flex: 1; min-width: 0;
  font-size: clamp(15px, 3.2vw, 22px); font-weight: 600;
  color: var(--ink);
  padding: 12px 16px; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) inset;
  word-break: break-all;
}
.ack-address .btn-ghost { padding: 0 16px; }

/* Final balance block */
.final-balance {
  margin-top: 20px; padding: 20px;
  border: 1px solid var(--green-mid); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--green-dim), rgba(44, 202, 181, 0.02));
}
.final-balance h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.final-balance h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(44, 202, 181, 0.18); }
.final-balance .kv dt { color: var(--ink-2); }
.final-balance .kv dd { color: var(--green-txt); font-size: 15px; font-weight: 650; }

/* validator picker: the chosen subnet's permit holders, read from the metagraph */
.picker { display: grid; gap: 8px; margin: 2px 0 8px; justify-items: start; }
.picker #pick-wrap { width: 100%; display: grid; gap: 8px; }
.pick-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--line-2); border-radius: 10px; max-height: 320px; overflow-y: auto; }
.pick { width: 100%; border-collapse: collapse; font: 400 12.5px/1.4 var(--mono); }
.pick th { position: sticky; top: 0; background: var(--panel-2); text-align: left; font-weight: 500; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.pick td { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pick tr:last-child td { border-bottom: 0; }
.holdings-change { display: block; font-size: 11.5px; color: var(--ink-3); }
.pick td.num { text-align: right; }
.pick tr[aria-current="true"] td { background: var(--green-dim); color: var(--ink); }
.pick button { font: inherit; color: var(--green-txt); background: none; border: 1px solid var(--green-mid); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.pick button:hover, .pick button:focus-visible { background: var(--green-dim); outline: none; }

/* holdings: what the Bittensor wallet on screen holds, read from the chain on request */
.holdings { display: grid; gap: 8px; margin-top: 10px; justify-items: start; }
.holdings #holdings-wrap { width: 100%; display: grid; gap: 8px; }
.move-panel { width: 100%; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); }
.move-panel h3 { margin: 0; font-size: 14px; }
.dir-controls { gap: 8px; flex-wrap: wrap; }
.dir-controls input, .dir-controls select { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; min-width: 0; }
.dir-controls input { flex: 1 1 200px; }
.dir-controls input:focus, .dir-controls select:focus { border-color: var(--green-mid); outline: none; }

/* ── info toggles: the short line stays visible, the explanation opens in place ── */
.stake-trust { margin: 0; color: var(--ink-3); font-size: 13.5px; letter-spacing: 0.01em; }
.info { max-width: 72ch; margin: 2px 0 6px; }
.info > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; color: var(--ink-3); font-size: 13px; padding: 4px 0; min-height: 28px; border-radius: 6px; }
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover, .info[open] > summary { color: var(--ink-2); }
.info > summary:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; }
.info-i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-3); font: italic 600 11px/1 Georgia, "Times New Roman", serif; color: var(--green-txt); flex: none; }
.info[open] .info-i { background: var(--green-dim); border-color: var(--green-mid); }
.info-body { margin: 6px 0 4px; padding: 10px 14px; border-left: 2px solid var(--line-3); color: var(--ink-2); font-size: 13.5px; line-height: 1.6; display: grid; gap: 8px; }
.info-body p { margin: 0; }
.info-body a { color: var(--green-txt); }
.info-body .stake-who { border: 0; padding: 0; }
.info-block > summary { font-size: 14px; }
.info-block .info-body { border-left: 0; padding: 12px 0 0; }
.info-row { display: flex; flex-wrap: wrap; gap: 0 22px; align-items: flex-start; }
.info-row .info { margin: 0; }
.info-row .info[open] { flex-basis: 100%; }
.direction-toggle { margin-top: 20px; }

/* the trust toggle sits alone between the steps and the footer: no full section padding around it */
.sec-trust { padding-block: 20px 36px; }

/* a subnet's own page: /stake/?netuid=N puts this card above the steps */
.subnet-card { margin-bottom: 14px; }
.subnet-card-in { display: grid; gap: 10px; border-color: var(--copper-mid); }
.subnet-card h2 { margin: 0; font-size: clamp(22px, 4vw, 30px); letter-spacing: -0.025em; }
.subnet-card h2 .subnet-symbol { color: var(--copper-txt); font-weight: 600; margin-left: 8px; }
.subnet-desc { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 72ch; overflow-wrap: anywhere; }
.subnet-kv { margin-top: 4px; }
.subnet-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; }
.subnet-links a { color: var(--green-txt); overflow-wrap: anywhere; }