/* ─────────────────────────────────────────────────────────────
   info.css — Netprobe / Connection Info Page
   Data visualisation styles only.
   Depends on: fonts.css, nav.css (for --nav-h)
───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --d0: #080809;
  --d1: #0e0e10;
  --d2: #131316;
  --d3: #18181c;
  --d4: #1e1e24;
  --d5: #26262e;
  --d6: #30303a;

  --g3: #3e3e4a;
  --g4: #52525e;
  --g5: #6a6a78;
  --g6: #888898;
  --g7: #a8a8b8;
  --g8: #c8c8d4;
  --g9: #e4e2ee;

  --accent:     #5a7e52;
  --accent-dim: rgba(90,126,82,.12);
  --accent-lit: #7aaa6a;
  --accent-glo: rgba(122,170,106,.18);

  --ok:       #4a8a5a;
  --ok-dim:   rgba(74,138,90,.14);
  --warn:     #8a7028;
  --warn-dim: rgba(138,112,40,.13);
  --err:      #8a3838;
  --err-dim:  rgba(138,56,56,.13);

  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Space Grotesk', system-ui, sans-serif;
  --mono:  'Space Grotesk', system-ui, monospace;

  --nav-h: 64px;
  --r:  8px;
  --r2: 5px;
  --r3: 3px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--d1);
  color: var(--g7);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Page wrapper ───────────────────────────────────────── */
.info-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 52px 48px 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── Page header ────────────────────────────────────────── */
.page-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--d5);
}

.page-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-lit);
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent-lit);
  opacity: .5;
}

.page-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--g9);
  line-height: 1.08;
  letter-spacing: -.01em;
}

.page-title span {
  /* The live IP injected here */
  color: var(--accent-lit);
}

.page-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--g6);
  background: var(--d3);
  border: 1px solid var(--d5);
  border-radius: 99px;
  padding: 6px 14px 6px 10px;
  width: fit-content;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--g4);
  flex-shrink: 0;
  transition: background .3s, box-shadow .3s;
}
.status-dot.ok   { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-dim); }
.status-dot.err  { background: var(--err);  box-shadow: 0 0 0 3px var(--err-dim); }

.page-ray {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--g5);
  letter-spacing: .03em;
}
.page-ray strong {
  color: var(--g6);
  font-weight: 600;
}

/* ── Section ────────────────────────────────────────────── */
.info-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g4);
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--d5);
}

/* ── Data grid (default 4-col) ──────────────────────────── */
.data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--d4);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--d4);
}

.data-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.data-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.data-cell {
  background: var(--d2);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  transition: background .16s;
  cursor: default;
}
.data-cell:hover { background: var(--d3); }

/* Wide cell spans 2 columns */
.data-cell.wide { grid-column: span 2; }

.data-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g4);
}

.data-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--g8);
  word-break: break-all;
  line-height: 1.3;
}
.data-val.xl    { font-size: 20px; color: var(--g9); }
.data-val.green { color: var(--ok); }
.data-val.accent{ color: var(--accent-lit); }
.data-val.dim   { color: var(--g5); font-weight: 400; }
.data-val.mono  { font-family: var(--mono); letter-spacing: .02em; }

/* Sub-label beneath value */
.data-sub {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  color: var(--g4);
  letter-spacing: .03em;
}

/* ── Highlight card (IP hero cell) ─────────────────────── */
.data-cell.hero {
  background: var(--d3);
  border-right: 2px solid var(--accent);
}
.data-cell.hero:hover { background: var(--d4); }

/* ── Protocol badge ─────────────────────────────────────── */
.proto-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-dim);
  border: 1px solid rgba(74,138,90,.22);
  border-radius: var(--r3);
  padding: 3px 9px;
  width: fit-content;
  margin-top: 2px;
  letter-spacing: .02em;
}
.proto-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ok);
}
.proto-badge.warn {
  color: var(--warn);
  background: var(--warn-dim);
  border-color: rgba(138,112,40,.22);
}
.proto-badge.warn::before { background: var(--warn); }

/* ── Edge route visualiser ──────────────────────────────── */
.route-card {
  background: var(--d2);
  border: 1px solid var(--d4);
  border-radius: var(--r);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  position: relative;
}

.route-node {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.route-node-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g4);
}

.route-node-name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--g9);
  line-height: 1.1;
}

.route-node-sub {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--g5);
  letter-spacing: .02em;
}

.route-node-ip {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-lit);
  letter-spacing: .02em;
  margin-top: 2px;
}

/* Arrow between nodes */
.route-arrow {
  flex: 0 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.route-arrow-line {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-dim));
  position: relative;
}
.route-arrow-line::after {
  content: '▶';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  color: var(--accent-lit);
  line-height: 1;
}

.route-arrow-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g4);
}

.route-pop {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-lit);
  letter-spacing: .06em;
  background: var(--accent-dim);
  border: 1px solid rgba(122,170,106,.15);
  border-radius: var(--r3);
  padding: 3px 9px;
}

/* ── Coords display ─────────────────────────────────────── */
.coord-pair {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.coord-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--g8);
}
.coord-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--g4);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Ray ID cell ────────────────────────────────────────── */
.rayid-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--g6);
  letter-spacing: .04em;
  word-break: break-all;
}
.rayid-val em {
  font-style: normal;
  color: var(--accent-lit);
  font-weight: 700;
}

/* ── Skeleton ────────────────────────────────────────────── */
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--d3) 25%, var(--d5) 50%, var(--d3) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 3px;
  color: transparent !important;
  user-select: none;
  min-width: 80px;
  min-height: 1em;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Error banner ────────────────────────────────────────── */
.error-banner {
  display: none;
  background: var(--err-dim);
  border: 1px solid rgba(138,56,56,.25);
  border-radius: var(--r2);
  padding: 14px 20px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: #c87070;
  gap: 10px;
  align-items: center;
}
.error-banner.visible { display: flex; }
.error-banner svg { flex-shrink: 0; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUp .4s ease both; }
.fade-up-1 { animation: fadeUp .4s .08s ease both; }
.fade-up-2 { animation: fadeUp .4s .16s ease both; }
.fade-up-3 { animation: fadeUp .4s .24s ease both; }
.fade-up-4 { animation: fadeUp .4s .32s ease both; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--d2); }
::-webkit-scrollbar-thumb { background: var(--d5); border-radius: 3px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1000px) {
  .data-grid             { grid-template-columns: repeat(2, 1fr); }
  .data-grid.cols-3      { grid-template-columns: repeat(2, 1fr); }
  .data-cell.wide        { grid-column: span 2; }
  .route-arrow-line      { width: 60px; }
}

@media (max-width: 720px) {
  .info-page  { padding: 36px 20px 60px; gap: 36px; }
  .data-grid,
  .data-grid.cols-3,
  .data-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .route-card { flex-direction: column; align-items: flex-start; gap: 20px; }
  .route-arrow { flex-direction: row; padding: 0; width: 100%; }
  .route-arrow-line { width: 100%; flex: 1; }
}

@media (max-width: 480px) {
  .data-grid,
  .data-grid.cols-3,
  .data-grid.cols-2 { grid-template-columns: 1fr; }
  .data-cell.wide   { grid-column: span 1; }
  .page-title       { font-size: 28px; }
}