/* =========================================================
   VPNTd iplookup.css
   Page-specific styles for ip-lookup.html (network check).
   All colors / radii / fonts reference :root tokens only.
   ========================================================= */

/* ---- page head (copy + decorative trace) ---- */
.ip-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:center;
}
.ip-head-copy{min-width:0}
@media (max-width:880px){
  .ip-head{grid-template-columns:1fr;gap:0}
}

/* decorative circuit trace (desktop only) */
.ip-deco{justify-self:end;align-self:center}
.ip-deco svg{display:block}
.ip-deco .d-line{
  fill:none;
  stroke:var(--trace);
  stroke-width:1.6;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.ip-deco .d-dim{stroke:var(--border);stroke-width:1.4}
.ip-deco .d-via{
  fill:var(--panel2);
  stroke:var(--trace);
  stroke-width:1.4;
}
.ip-deco .d-hot{
  fill:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
}
@media (max-width:880px){
  .ip-deco{display:none}
}

/* ---- result card ---- */
.ip-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.ip-card-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.ip-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 13px;
}
.ip-status .st-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--muted);
  flex-shrink:0;
}
.ip-status.is-ok{color:var(--success);border-color:var(--border)}
.ip-status.is-ok .st-dot{
  background:var(--success);
  box-shadow:0 0 8px var(--success);
}
.ip-status.is-error{color:var(--error);border-color:var(--border)}
.ip-status.is-error .st-dot{background:var(--error)}

.ip-main{
  padding:22px 0 20px;
  border-bottom:1px solid var(--border);
  margin-bottom:18px;
}
.ip-addr{
  font-family:var(--font-mono);
  font-size:clamp(24px,4vw,40px);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
  overflow-wrap:anywhere;
  margin-top:6px;
  min-height:44px;
}

.ip-key{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.ip-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.ip-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  padding:14px 16px;
  min-width:0;
}
.ip-val{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  overflow-wrap:anywhere;
  min-height:22px;
}
.ip-val.v-ok{color:var(--success)}
.ip-val.v-warn{color:var(--warn)}

/* waiting pulse (transform/opacity only) */
.ip-addr.is-wait,
.ip-val.is-wait{
  color:var(--muted);
  animation:ipPulse 1.2s ease-in-out infinite;
}
@keyframes ipPulse{
  0%,100%{opacity:.35}
  50%{opacity:1}
}

.ip-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}
.ip-actions .btn-secondary:disabled,
.ip-actions .btn-ghost:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ---- field notes grid ---- */
.ip-note-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
}
.ip-note-grid .card h3{
  font-size:16px;
  margin-bottom:9px;
}
.ip-note-grid .card p{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.75;
}
@media (max-width:880px){
  .ip-note-grid{grid-template-columns:1fr}
}

/* ---- related links row ---- */
.rel-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

/* ---- breakpoints ---- */
@media (max-width:560px){
  .ip-grid{grid-template-columns:1fr}
  .ip-card-top{align-items:flex-start}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .ip-addr.is-wait,
  .ip-val.is-wait{
    animation:none;
    opacity:1;
  }
}