/* Hero connection card ("Ihre Verbindung") and its node on the mesh — visuals after .connection-reference/connection-card.css.
   Placement in the hero grid and the mobile header live in styles.css. connection-card.js fills the card with textContent only. */

.conn-card {
  --conn-bg: rgba(36, 54, 64, 0.72);
  --conn-border: rgba(255, 255, 255, 0.1);
  --conn-accent: #7ACCD6;
  --conn-highlight: #00E9E6;
  --conn-text: #E8EEF0;
  --conn-text-2: #C9D4D7;
  --conn-muted: #A3B3B8;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 470px; /* the width of the hero text column; height stays natural, nothing is clipped */
  padding: 14px 18px 16px;
  background: var(--conn-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--conn-border);
  border-radius: 12px;
  font-family: var(--sc-font-body);
  color: var(--conn-text-2);
}
.conn-card[hidden] { display: none; }
/* Without JS nothing can fill the card, so it never shows. */
html:not(.js) .conn-card, html:not(.js) .conn-node { display: none; }

/* Head: label with pulsing dot, privacy note; wraps under the label on narrow cards. */
.conn-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 12px; row-gap: 4px; }
.conn-card__title { display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0; font-family: var(--sc-font-ui); font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--conn-accent); }
.conn-card__private { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--conn-muted); white-space: nowrap; }
.conn-card__private svg { flex: none; width: 12px; height: 12px; }

/* IP row: address, IPv4/IPv6 tag, copy button. A full IPv6 wraps inside the card instead of pushing it wider. */
.conn-card__ip-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.conn-card__ip { flex: 0 1 auto; min-width: 0; padding-top: 4px; font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums; color: var(--conn-text); overflow-wrap: anywhere; }
.conn-card__tag { flex-shrink: 0; margin-top: 7px; padding: 4px 6px; border-radius: 4px; background: rgba(1, 159, 182, 0.16); font-family: var(--sc-font-ui); font-weight: 500; font-size: 10px; line-height: 10px; letter-spacing: 0.12em; color: var(--conn-accent); }
.conn-card:not([data-state="loading"]) .conn-card__tag:empty { display: none; }

/* Copy button: a 44×44 hit area; the drawn 32px box is ::before, and the negative margins keep the row as tight as the reference. */
.conn-card__copy { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px -6px -6px auto; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--conn-accent); font: inherit; font-size: 13px; cursor: pointer; }
.conn-card__copy::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.04); transition: border-color .2s, background .2s; }
.conn-card__copy:hover::before { border-color: rgba(122, 204, 214, 0.5); }
.conn-card__copy:focus-visible { outline: 2px solid var(--conn-highlight); outline-offset: -4px; }
.conn-card__copy:disabled { opacity: 0.35; cursor: default; }
.conn-card__copy:disabled:hover::before { border-color: rgba(255, 255, 255, 0.14); }
.conn-card__copy svg { position: relative; width: 15px; height: 15px; }
.conn-card__copy .icon-check { display: none; }

/* "Kopiert": a small tooltip above the drawn box, so nothing in the card moves while it shows. */
.conn-card__copied { display: none; position: absolute; right: 6px; bottom: 100%; padding: 3px 8px; border-radius: 6px; background: #017A8C; color: #FFFFFF; font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; }
.conn-card[data-state="copied"] .conn-card__copy::before { border-color: rgba(122, 204, 214, 0.5); background: rgba(1, 159, 182, 0.16); }
.conn-card[data-state="copied"] .conn-card__copy .icon-copy { display: none; }
.conn-card[data-state="copied"] .conn-card__copy .icon-check { display: inline; }
.conn-card[data-state="copied"] .conn-card__copied { display: block; }

/* Details: provider, location, coordinates, each with an icon; long provider names wrap inside the card. */
.conn-card__details { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 4px; margin: 8px 0 0; padding: 0; font-size: 13px; line-height: 20px; }
.conn-card__detail { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; min-height: 20px; }
.conn-card__detail[hidden] { display: none; }
.conn-card__detail dt { display: flex; flex: none; color: var(--conn-accent); }
.conn-card__detail dt svg { width: 14px; height: 14px; }
.conn-card__detail dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.conn-card__coords { font-variant-numeric: tabular-nums; }

/* Loading: skeleton bars until the data arrives (the fields start empty). */
.conn-card[data-state="loading"] .conn-card__ip,
.conn-card[data-state="loading"] .conn-card__tag,
.conn-card[data-state="loading"] .conn-card__detail dd { background: rgba(255, 255, 255, 0.1); border-radius: 4px; animation: conn-shimmer 1.4s ease-in-out infinite; }
.conn-card[data-state="loading"] .conn-card__ip { flex: 0 1 180px; height: 18px; margin-top: 7px; padding: 0; }
.conn-card[data-state="loading"] .conn-card__tag { box-sizing: border-box; width: 30px; height: 18px; padding: 0; }
.conn-card[data-state="loading"] .conn-card__detail dd { height: 10px; }
.conn-card[data-state="loading"] [data-conn-row="provider"] dd { width: 130px; }
.conn-card[data-state="loading"] [data-conn-row="location"] dd { width: 80px; }
.conn-card[data-state="loading"] [data-conn-row="coords"] dd { width: 100px; }

/* Pulsing dot in the label. */
.conn-dot { position: relative; flex-shrink: 0; width: 6px; height: 6px; }
.conn-dot::before, .conn-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.conn-dot::before { background: rgba(0, 233, 230, 0.5); animation: conn-pulse 2.4s ease-out infinite; }
.conn-dot::after { background: var(--conn-highlight); box-shadow: 0 0 8px rgba(0, 233, 230, 0.8); }

/* The visitor on the mesh: decorative, never takes the mesh's pointer events. topology.js draws a random graph,
   so this is a fixed spot in the upper right of the graph's inset band, not a claim on one of its nodes. */
.conn-node { position: absolute; left: 72%; top: 34%; z-index: 1; width: 10px; height: 10px; transform: translate(-50%, -50%); pointer-events: none; }
.conn-node[hidden] { display: none; }
.conn-node::before, .conn-node::after { content: ""; position: absolute; border-radius: 50%; }
.conn-node::before { inset: 0; background: rgba(0, 233, 230, 0.5); animation: conn-pulse 2.4s ease-out infinite; }
.conn-node::after { inset: 1px; background: #00E9E6; box-shadow: 0 0 12px rgba(0, 233, 230, 0.85); }

@keyframes conn-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.4); opacity: 0; }
}
@keyframes conn-shimmer {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .conn-dot::before, .conn-node::before { animation: none; opacity: 0; }
  .conn-card[data-state="loading"] .conn-card__ip,
  .conn-card[data-state="loading"] .conn-card__tag,
  .conn-card[data-state="loading"] .conn-card__detail dd { animation: none; }
}
.reduce-motion .conn-dot::before, .reduce-motion .conn-node::before { animation: none; opacity: 0; }
.reduce-motion .conn-card[data-state="loading"] .conn-card__ip,
.reduce-motion .conn-card[data-state="loading"] .conn-card__tag,
.reduce-motion .conn-card[data-state="loading"] .conn-card__detail dd { animation: none; }

@media (forced-colors: active) {
  .conn-card { border-color: CanvasText; }
  .conn-card__copy::before { border-color: ButtonText; }
  .conn-card__copy:focus-visible { outline-color: Highlight; }
}

/* Mobile: column width up to the same 470px cap; the drawn copy box grows to 40px inside the same 44px hit area. */
@media (max-width: 760px) {
  .conn-card { padding: 14px 16px 16px; }
  .conn-card__copy { margin: -6px -2px -2px auto; }
  .conn-card__copy::before { inset: 2px; }
  .conn-card__copy:focus-visible { outline-offset: 0; }
  .conn-card__copied { right: 2px; bottom: calc(100% + 4px); }
}