/* VergeDefence Ramp, page-specific additions on top of the shared VergeDefence design system (styles.css) */

/* Topbar blended dark to match the black sidebar */
.topbar{
  background:#000;
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:none;
}
.topbar .crumb{ color:rgba(255,255,255,.5); }
.topbar .crumb b{ color:#fff; }
.topbar .topstats{ color:rgba(255,255,255,.5); }
.topbar .top-cta{
  color:#fff;
  border-color:rgba(255,255,255,.18);
}
.topbar .top-cta:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.ramp-shell{
  max-width:520px;
  margin:0 auto;
}

.ramp-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(1.4rem,1.1rem + 1.4vw,2rem);
}

.ramp-modes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  margin-bottom:1.6rem;
}
.ramp-mode{
  padding:.75em 1em;
  border:1px solid var(--line-strong);
  border-radius:var(--r-control);
  background:var(--surface-muted);
  color:var(--ink-muted);
  font-family:var(--font-mono);
  font-size:var(--step--1);
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  text-align:center;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.ramp-mode[aria-pressed="true"]{
  background:var(--ink);
  color:var(--canvas);
  border-color:var(--ink);
}

.ramp-field{
  margin-bottom:1.1rem;
}
.ramp-field label{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--step--1);
  color:var(--ink-muted);
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-bottom:.4em;
}
.ramp-field select,
.ramp-field input{
  width:100%;
  padding:.7em .85em;
  border:1px solid var(--line-strong);
  border-radius:var(--r-control);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--step-0);
}
.ramp-field select:focus,
.ramp-field input:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.ramp-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem;
}

.ramp-submit{
  width:100%;
  margin-top:.4rem;
  padding:.85em 1em;
  border:none;
  border-radius:var(--r-control);
  background:var(--accent);
  color:#fff;
  font-family:var(--font-mono);
  font-size:var(--step-0);
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .18s var(--ease);
}
.ramp-submit:hover{ background:var(--accent-press); }
.ramp-submit:disabled{ opacity:.55; cursor:not-allowed; }

.ramp-note{
  margin-top:1rem;
  padding:.85em 1em;
  border-radius:var(--r-control);
  font-size:var(--step--1);
  font-family:var(--font-mono);
  display:none;
}
.ramp-note[data-state="ok"]{
  display:block;
  background:rgba(52,211,153,.12);
  color:#0f9d6e;
  border:1px solid rgba(52,211,153,.35);
}
.ramp-note[data-state="err"]{
  display:block;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid rgba(255,75,64,.35);
}

.ramp-result{
  margin-top:1.4rem;
  padding:1.2rem;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface-muted);
  display:none;
}
.ramp-result.show{ display:block; }
.ramp-result h4{
  font-size:var(--step-0);
  margin-bottom:.6rem;
}
.ramp-result dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.35rem 1rem;
  font-size:var(--step--1);
}
.ramp-result dt{ color:var(--ink-muted); }
.ramp-result dd{ font-family:var(--font-mono); word-break:break-all; }
.ramp-result #ramp-qr{
  margin-top:1rem;
  display:flex;
  justify-content:center;
}

.ramp-trust{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:1.6rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  color:var(--ink-muted);
  font-size:var(--step--1);
}
.ramp-trust svg{ width:16px; height:16px; stroke:var(--accent); flex:0 0 auto; }