/* ==========================================================================
   ijoo.org — WireGuard peer builder (loads after calc.css)
   ========================================================================== */

/* ---------------- peers ---------------- */

.peer-list{ display:flex; flex-direction:column; gap:16px; margin-bottom:4px; }

.peer{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px;
  padding:18px; background:rgba(12,3,20,.62);
  border:1px solid var(--line); border-radius:4px;
}
.peer__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start;
}
.peer label{
  display:flex; flex-direction:column; gap:5px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.peer label input{
  font-family:var(--mono); font-size:12.5px; color:var(--text);
  background:rgba(10,3,18,.75); border:1px solid var(--line); border-radius:3px;
  padding:8px 10px; min-width:0;
  transition:border-color .16s;
}
.peer label input:focus{ outline:none; border-color:var(--cyan); }
.peer__wide{ grid-column:1/-1; }

.peer__out{ display:flex; flex-direction:column; gap:10px; }
.peer__cfg{
  flex:1; margin:0; padding:14px 16px; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--cyan);
  background:#0a0313; border:1px solid var(--line); border-radius:3px;
  white-space:pre; min-width:0;
}
.peer__del{ align-self:flex-start; }

/* ---------------- responsive ---------------- */

@media (max-width:860px){
  .peer{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .wghero{ padding:34px 0 20px; }
  .wg__tab{ padding:10px 13px; font-size:11px; letter-spacing:.08em; }
  .peer__grid{ grid-template-columns:1fr; }
  .wg__in, .wg__in--sm{ min-width:0; width:100%; }
  .wg__tbl th{ padding-right:10px; }
}