/* Beacon Trusted Network module styles. Uses only existing custom properties
   from styles.css (navy / red / pale / pale-sea / cream palette). */

/* ---------- provider cards ---------- */
.net-card { margin-top: 0.8rem; border-left: 5px solid var(--pale-sea); }
.net-card.verified { border-left-color: var(--navy); }
.net-card.government { border-left-color: var(--red); }

.net-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; }
.net-top h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; }

.net-demo {
  flex: 0 0 auto;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
  color: var(--red); border: 1.5px solid var(--red); border-radius: 100px;
  padding: 0.14rem 0.55rem; margin-top: 0.1rem;
}

.net-meta { font-size: 0.8rem; color: var(--slate); margin-top: 0.2rem; }

/* ---------- verification level badges ---------- */
.net-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; align-items: center; }
.net-lv {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 100px; padding: 0.22rem 0.65rem;
}
.net-lv svg { width: 13px; height: 13px; flex: 0 0 auto; }
.net-lv.ready { background: var(--pale); color: var(--navy); border: 1.5px solid var(--pale-sea); }
.net-lv.verified { background: var(--navy); color: var(--white); border: 1.5px solid var(--navy); }
.net-lv.government { background: var(--white); color: var(--red); border: 1.5px solid var(--red); }

.net-train {
  display: inline-flex; align-items: center;
  font-size: 0.68rem; font-weight: 600; color: var(--slate);
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 100px; padding: 0.22rem 0.65rem;
}

/* ---------- language chips + info lines ---------- */
.net-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.6rem; }
.net-line-h { font-size: 0.72rem; font-weight: 700; color: var(--slate); margin-right: 0.15rem; }
.net-langchip {
  font-size: 0.68rem; font-weight: 700; color: var(--navy);
  background: var(--pale); border-radius: 100px; padding: 0.16rem 0.5rem;
}
.net-line { font-size: 0.82rem; color: var(--slate); margin-top: 0.45rem; }
.net-fine { font-size: 0.7rem; color: var(--slate); margin-top: 0.4rem; font-style: italic; }
.net-count { font-size: 0.78rem; font-weight: 700; color: var(--slate); margin-top: 0.5rem; }

/* ---------- action buttons ---------- */
.net-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

/* ---------- map markers (inside the shared trmap svg) ---------- */
.netpin .netpin-body { stroke-width: 0.8; }
.netpin.ready .netpin-body { fill: var(--pale-sea); stroke: var(--navy); }
.netpin.ready .netpin-dot { fill: var(--navy); }
.netpin.verified .netpin-body { fill: var(--navy); stroke: var(--navy); }
.netpin.verified .netpin-dot { fill: var(--white); }
.netpin.government .netpin-body { fill: var(--white); stroke: var(--red); stroke-width: 1.4; }
.netpin.government .netpin-dot { fill: var(--red); }
.netpin .netpin-chk-c { fill: var(--white); stroke: rgba(11, 42, 80, 0.3); stroke-width: 1; }
.netpin .netpin-chk { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.netpin.government .netpin-chk { stroke: var(--red); }

.net-legend { font-size: 0.7rem; color: var(--navy); margin-top: 0.6rem; text-align: center; font-weight: 600; }

/* level filter chips keep their accent when pressed */
.chip.net-chip-ready[aria-pressed="true"] { background: var(--pale-sea); border-color: var(--pale-sea); color: var(--navy); }
.chip.net-chip-government[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }