/* ============================================================
   CATBACK — STAKE & GROW panel (sits beside the PROOF panel).
   Green dominant with restrained gold accents on reward terms.
   ============================================================ */

/* PROOF keeps its own floating position (untouched) */
/* PROOF now lives in the nav beside the social chips — bold branch signage */
.proof-panel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 9px;
  background: var(--ink-3);
  border: var(--px) solid var(--c-emerald, var(--forest-2));
  white-space: nowrap;
}
.proof-title {
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-emerald, var(--terminal));
}
.proof-link {
  font-family: var(--font-term);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-emerald, var(--terminal));
  text-decoration: underline;
}
.proof-tba {
  font-family: var(--font-term);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--amber);
}
@media (max-width: 1179.98px) { .proof-panel { display: none; } }

/* the enlarged card — left of the machine, balancing the deployment log */
.stake-panel {
  position: relative;
  z-index: 4;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-color: var(--moss);
  box-shadow: 0 0 0 var(--px) var(--forest), 0 0 24px var(--glow-soft);
}

.stk-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 0.75;
}
.stake-panel > *:not(.stk-fx) { position: relative; z-index: 1; }

/* ---- header ---- */
.stk-head { display: flex; align-items: center; gap: 8px; }
.stk-kicker {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--gold);
}
.stk-state {
  margin-left: auto;
  font-family: var(--font-term);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 1px 6px;
  border: 1px solid var(--forest-2);
  color: var(--terminal-dim);
}
.stk-state.is-test { color: var(--amber); border-color: var(--amber); }
.stk-state.is-live { color: var(--sol-cyan); border-color: var(--sol-cyan); }
.stk-state.is-off  { color: var(--terminal-dim); }

/* ---- the primary CTA: biggest button on the page ---- */
.stk-cta {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  min-height: 62px;
  cursor: pointer;
  border: 0;
  padding: 16px 12px;
  font-family: var(--font-pixel);
  font-size: 15px;
  letter-spacing: 2px;
  /* the ATM's own body green — the button reads as part of the machine */
  color: #0d2c11;
  background: var(--atm-green);
  box-shadow:
    0 var(--px) 0 var(--px) var(--forest-2),
    inset 0 calc(-3 * var(--px)) 0 rgba(0, 0, 0, 0.28),
    0 0 20px var(--glow-terminal);
  animation: stk-breathe 3.4s var(--ease-mech) infinite;
  transition: filter var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap),
    box-shadow var(--dur-fast) var(--ease-snap);
}
.stk-cta:hover, .stk-cta:focus-visible {
  filter: brightness(1.12);
  box-shadow:
    0 var(--px) 0 var(--px) var(--forest-2),
    inset 0 calc(-3 * var(--px)) 0 rgba(0, 0, 0, 0.28),
    0 0 34px var(--glow-terminal), 0 0 60px var(--glow-soft);
}
.stk-cta:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--px) var(--forest-2), inset 0 calc(-1 * var(--px)) 0 rgba(0,0,0,0.3);
}
.stk-cta-hover { display: none; }
.stk-cta:hover .stk-cta-label, .stk-cta:focus-visible .stk-cta-label { display: none; }
.stk-cta:hover .stk-cta-hover, .stk-cta:focus-visible .stk-cta-hover { display: inline; }

/* shine sweep every few seconds */
.stk-shine {
  position: absolute;
  top: 0; left: -40%;
  width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  animation: stk-shine 6.5s var(--ease-mech) infinite;
}
@keyframes stk-shine { 0%, 72% { left: -40%; } 88%, 100% { left: 115%; } }
@keyframes stk-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
body[data-motion="reduce"] .stk-cta { animation: none; }
body[data-motion="reduce"] .stk-shine { animation: none; opacity: 0; }

/* ---- copy ---- */
.stk-desc {
  margin: 0;
  font-family: var(--font-term);
  font-size: 15px;
  line-height: 1.35;
  color: var(--terminal-soft);
}
.stk-terms { display: flex; flex-direction: column; gap: 3px; }
.stk-row {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-term); font-size: 14px;
}
.stk-k { color: var(--terminal-dim); letter-spacing: 1px; }
.stk-v { margin-left: auto; color: var(--gold); text-align: right; }
.stk-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.4;
  color: var(--terminal-dim);
}

/* ---- tooltip ---- */
.stk-tip {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  padding: 6px 8px;
  background: var(--ink);
  border: var(--px) solid var(--moss);
  font-family: var(--font-term);
  font-size: 13px;
  color: var(--terminal);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  z-index: 3;
}
.stake-panel:hover .stk-tip, .stake-panel:focus-within .stk-tip {
  opacity: 1; transform: none;
}

/* ---- dialog contents (inside a retro window) ---- */
.stk-dlg { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-term); }
.stk-lead { margin: 0; font-size: 16px; color: var(--terminal-soft); }
.stk-lead strong { color: var(--amber); }
.stk-blockers { margin: 0; padding-left: 18px; font-size: 14px; color: var(--amber); }
.stk-blockers li { margin: 2px 0; }
.stk-fine {
  margin: 0; font-family: var(--font-body); font-size: 11px; line-height: 1.45;
  color: var(--terminal-dim);
}
.stk-warn { color: var(--amber); }
.stk-testbanner {
  margin: 0; padding: 6px 8px;
  border: var(--px) solid var(--amber);
  color: var(--amber);
  font-size: 14px;
}
.stk-addr {
  border: var(--px) solid var(--forest-2);
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.stk-addr-v { font-size: 13px; color: var(--terminal); word-break: break-all; }
.stk-addr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stk-scan { font-size: 14px; color: var(--sol-cyan); }
.stk-input {
  width: 100%;
  background: var(--ink);
  border: var(--px) solid var(--forest-2);
  color: var(--terminal);
  font-family: var(--font-term);
  font-size: 18px;
  padding: 8px;
  min-height: 40px;
}
.stk-summary { display: flex; flex-direction: column; gap: 2px; }
.stk-consent {
  display: flex; gap: 8px; align-items: flex-start;
  font-family: var(--font-body); font-size: 11px; line-height: 1.45;
  color: var(--terminal-soft);
}
.stk-consent input { margin-top: 2px; min-width: 18px; min-height: 18px; }
.stk-go { min-height: 44px; }
.stk-go:disabled { opacity: 0.45; cursor: not-allowed; }
/* ---- the expanded panel ---- */
.stk-panel-body { padding: 0; }
.stk-dlg-big { gap: 0; }
.stk-sect {
  padding: 16px 18px;
  border-bottom: var(--px) solid var(--forest-2);
  display: flex; flex-direction: column; gap: 10px;
}
.stk-sect:last-child { border-bottom: 0; }
.stk-sect-h {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--terminal);
  text-shadow: 0 0 10px var(--glow-soft);
}
.stk-grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px;
}
.stk-mt { margin-top: 4px; }

/* growth chain */
.stk-chain {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px; border: var(--px) solid var(--forest-2); background: var(--ink-3);
}
.stk-chain-i {
  font-family: var(--font-term); font-size: 15px; letter-spacing: 1px;
  color: var(--terminal-soft); text-align: center;
}
.stk-chain-i.is-out { color: var(--gold); }
.stk-chain-op { font-family: var(--font-pixel); font-size: 12px; color: var(--terminal-dim); }

.stk-example {
  position: relative;
  padding: 12px; padding-top: 26px;
  border: var(--px) dashed var(--gold);
}
.stk-illus {
  position: absolute; top: 6px; left: 12px;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1px;
  color: var(--amber);
}

/* deposit options */
.stk-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stk-opt {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  min-height: 96px; padding: 14px 12px;
  text-align: left; cursor: pointer;
  background: var(--ink-3);
  border: var(--px) solid var(--moss);
  color: var(--terminal-soft);
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.stk-opt:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 18px var(--glow-soft);
}
.stk-opt:disabled { cursor: not-allowed; opacity: 0.72; border-color: var(--forest-2); }
.stk-opt-n { font-family: var(--font-pixel); font-size: 8px; color: var(--terminal-dim); letter-spacing: 1px; }
.stk-opt-l { font-family: var(--font-pixel); font-size: 11px; color: var(--terminal); letter-spacing: 1px; }
.stk-opt-h { font-family: var(--font-term); font-size: 14px; color: var(--terminal-dim); }
.stk-locked {
  margin-top: 4px;
  font-family: var(--font-term); font-size: 12px; letter-spacing: 1px;
  color: var(--amber); border: 1px solid var(--amber); padding: 1px 6px; align-self: flex-start;
}
.stk-method-slot:empty { display: none; }
.stk-pane {
  margin-top: 12px; padding: 12px;
  border: var(--px) solid var(--forest-2);
  display: flex; flex-direction: column; gap: 10px;
}

@media (max-width: 659.98px) {
  .stk-options, .stk-grid2 { grid-template-columns: 1fr; }
  .stk-sect { padding: 14px; }
}

.stk-fallback {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: var(--z-toast); max-width: 420px; padding: 16px; display: flex;
  flex-direction: column; gap: 12px;
}

/* ---- larger type in the roomier card ---- */
.stake-panel .stk-kicker { font-size: 11px; }
.stake-panel .stk-desc { font-size: 16px; }
.stake-panel .stk-row { font-size: 15px; }
.stake-panel .stk-note { font-size: 11px; }

/* status + pool strip */
.stk-status {
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 8px;
  border: var(--px) solid var(--forest-2);
  background: var(--ink-3);
}
.stk-creator {
  font-family: var(--font-term);
  font-size: 13px;
  color: var(--terminal-dim);
  border-left: 2px solid var(--gold);
  padding-left: 8px;
}

/* ---- mobile: the card sits BENEATH the ATM, full width ---- */
@media (max-width: 899.98px) {
  .stake-panel {
    grid-area: stake;      /* the mobile grid places it under the ATM + CA */
    width: min(520px, 100%);
    align-self: stretch;
  }
  .proof-panel { position: static; }
}