/* higher-network — embeddable widget. Everything is scoped under .hnw so it
   cannot collide with Divi or the theme. No build step, no framework. */

.hnw {
  --hnw-bg:      #0A0C09;
  --hnw-panel:   #12160F;
  --hnw-panel2:  #181D14;
  --hnw-line:    #242B1F;
  --hnw-ink:     #F2F4F0;
  --hnw-ink2:    #B7BEB2;
  --hnw-mute:    #7C857A;
  --hnw-brand:   #00A63E;
  --hnw-brand2:  #4ADE80;
  --hnw-mono:    ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;

  position: relative;
  width: 100%;
  height: 640px;
  min-height: 460px;
  background: var(--hnw-bg);
  color: var(--hnw-ink);
  border-radius: 14px;
  overflow: hidden;
  font-family: inherit;
  isolation: isolate;
}
.hnw.hnw-tall { height: 78vh; }

.hnw *, .hnw *::before, .hnw *::after { box-sizing: border-box; }

.hnw canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.hnw canvas.hnw-drag { cursor: grabbing; }

/* ---------- top panel ----------
   Filters, dashboard and legend stack in ONE column. They used to be three
   separate absolute layers at fixed offsets, so a second row of filter chips
   sat on top of the dashboard boxes. A flex column cannot overlap itself. */
.hnw-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px 20px; pointer-events: none;
  /* No backdrop. The network runs underneath; every box below carries its own
     opaque background and a shadow so it stays readable over the dots. */
  background: none;
}
.hnw-top > * { pointer-events: auto; }

.hnw-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  pointer-events: none;
}
.hnw-bar > * { pointer-events: auto; }

.hnw-live {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--hnw-mono); font-size: 11px; color: var(--hnw-ink2);
  background: var(--hnw-panel); border: 1px solid var(--hnw-line);
  border-radius: 8px; padding: 6px 10px;
}
.hnw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hnw-brand); }

/* No margin-left:auto. It right-aligned the chips, and once they wrapped onto
   their own row they started from the right edge with nothing above them.
   Left-aligned they sit next to the counter when there is room and start at
   the left when there is not. */
.hnw-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.hnw-tag {
  font-family: var(--hnw-mono); font-size: 11px; color: var(--hnw-ink2);
  background: var(--hnw-panel); border: 1px solid var(--hnw-line);
  border-radius: 999px; padding: 5px 10px; cursor: pointer; white-space: nowrap;
  line-height: 1.2;
}
.hnw-tag:hover { border-color: var(--hnw-brand); color: var(--hnw-ink); }
.hnw-tag[aria-pressed="true"] { background: var(--hnw-brand); border-color: var(--hnw-brand); color: #04220E; font-weight: 700; }
.hnw-tag i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.hnw-tag:focus-visible, .hnw-btn:focus-visible { outline: 2px solid var(--hnw-brand2); outline-offset: 2px; }

/* ---------- bottom controls ---------- */
.hnw-hud { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: flex; gap: 6px; align-items: center; }
.hnw-btn {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--hnw-ink2);
  background: var(--hnw-panel); border: 1px solid var(--hnw-line);
  border-radius: 8px; padding: 7px 11px; cursor: pointer; line-height: 1;
}
.hnw-btn:hover { border-color: var(--hnw-brand); color: var(--hnw-ink); }
.hnw-btn.hnw-on { border-color: var(--hnw-brand); color: var(--hnw-brand2); }
.hnw-btn.hnw-primary { background: var(--hnw-brand); border-color: var(--hnw-brand); color: #04220E; font-weight: 700; }

/* One line, under the dashboard. The circle colours live on the filter chips
   and are not repeated here. */
.hnw-legend {
  align-self: flex-start;
  font-family: var(--hnw-mono); font-size: 10px; color: var(--hnw-mute);
  line-height: 1.5;
}
.hnw-legend b { color: var(--hnw-brand2); font-weight: 700; }
@media (max-width: 640px) { .hnw-legend { display: none; } }

/* ---------- the card ---------- */
.hnw-side {
  position: absolute; right: 0; top: 0; bottom: 0; width: 340px; max-width: 88%;
  background: var(--hnw-panel); border-left: 1px solid var(--hnw-line);
  transform: translateX(101%); transition: transform .2s ease; z-index: 4;
  display: flex; flex-direction: column;
}
.hnw-side.hnw-open { transform: none; }
.hnw-close {
  position: absolute; top: 8px; right: 10px; background: none; border: 0;
  color: var(--hnw-mute); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; padding: 4px;
}
/* // WARNING: min-height:0 is the whole fix. A flex child defaults to
   min-height:auto, so the body refused to shrink below its content and the
   card was cut off by .hnw's overflow:hidden — the fourth Onchain row, the
   fourth Offchain row and the second badge line were simply not reachable.
   flex:1 + min-height:0 is what lets overflow-y:auto actually scroll. */
.hnw-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
  overscroll-behavior: contain;
}
/* // WARNING: the second half of the same fix, and the one that actually
   showed. A flex column shrinks its children to make them fit, and every
   section here carries overflow:hidden — so Onchain lost its last row,
   Offchain its fourth, and Badges its second line, silently and with no
   scrollbar to hint at it. Children must keep their natural height; the
   BODY is what scrolls. */
.hnw-body > * { flex: 0 0 auto; }

.hnw-card {
  border-radius: 13px; padding: 15px; position: relative; overflow: hidden;
  background: linear-gradient(145deg, #12341F 0%, #0C1B12 55%, #0A0C09 100%);
  border: 1px solid #1E4A2C;
}
.hnw-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 85% 0%, rgba(0,166,62,.26), transparent 60%);
}
.hnw-card > * { position: relative; }
.hnw-card .hnw-hd {
  display: flex; font-family: var(--hnw-mono); font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: #9FD9B4;
}
.hnw-card .hnw-hd b { margin-left: auto; color: var(--hnw-brand2); }
.hnw-who { display: flex; align-items: center; gap: 11px; margin-top: 11px; }
.hnw-av {
  width: 52px; height: 52px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #04220E;
}
.hnw-card h3 { font-size: 18px; margin: 0; font-weight: 800; line-height: 1.2; color: var(--hnw-ink); }
.hnw-addr { margin-top: 4px; }
/* Shortened address with a copy affordance — same behaviour as the
   TokenTrends quick-look popup, so it reads the same in both products. */
.hnw-copy {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--hnw-mono); font-size: 10.5px; color: #8FBFA0;
  background: rgba(0,0,0,.3); border: 1px solid #1E4A2C;
  border-radius: 7px; padding: 3px 7px; cursor: pointer; line-height: 1.4;
}
.hnw-copy:hover { border-color: var(--hnw-brand); color: var(--hnw-brand2); }
.hnw-copy.ok { border-color: var(--hnw-brand2); color: var(--hnw-brand2); }
.hnw-copy .ico { font-size: 11px; opacity: .8; }
.hnw-copy:focus-visible { outline: 2px solid var(--hnw-brand2); outline-offset: 2px; }
.hnw-circles { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }

.hnw-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.hnw-strip div { background: rgba(0,0,0,.32); border: 1px solid #1E4A2C; border-radius: 8px; padding: 7px 8px; }
/* "NETWORK SCORE" wraps, "HOLDING" does not — without a reserved second line
   the three values sat at three different heights. */
.hnw-strip .k {
  font-family: var(--hnw-mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8FBFA0; line-height: 1.35; min-height: 2.7em;
}
.hnw-strip .v { font-family: var(--hnw-mono); font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }

.hnw-capline {
  margin-top: 10px; padding: 7px 10px; border-radius: 8px;
  background: rgba(0,166,62,.14); border: 1px solid rgba(0,166,62,.4);
  font-family: var(--hnw-mono); font-size: 10px; color: var(--hnw-brand2);
}
.hnw-capline b { color: #fff; }
.hnw-foot {
  display: flex; margin-top: 11px; font-family: var(--hnw-mono); font-size: 9px;
  color: #8FBFA0; letter-spacing: .1em; text-transform: uppercase;
}
.hnw-foot span:last-child { margin-left: auto; }

.hnw-sect { background: var(--hnw-panel2); border: 1px solid var(--hnw-line); border-radius: 10px; overflow: hidden; }
.hnw-sect h4 {
  font-family: var(--hnw-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hnw-mute); margin: 0; padding: 10px 12px 6px; font-weight: 700;
}
.hnw-kv { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; font-size: 12.5px; padding: 0 12px 12px; margin: 0; }
.hnw-kv dt { color: var(--hnw-ink2); }
.hnw-kv dd { margin: 0; font-family: var(--hnw-mono); font-size: 12px; text-align: right; color: var(--hnw-ink); }
.hnw-kv dd.g { color: var(--hnw-brand2); }

.hnw-flags { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 12px 12px; }
.hnw-flag {
  font-family: var(--hnw-mono); font-size: 9.5px; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--hnw-line); color: var(--hnw-ink2); background: rgba(0,0,0,.25);
}
.hnw-flag.on { border-color: var(--hnw-brand); color: var(--hnw-brand2); }

.hnw-actions { display: flex; gap: 7px; }
.hnw-actions button {
  flex: 1; font-family: var(--hnw-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 9px; border-radius: 8px;
  cursor: pointer; border: 1px solid var(--hnw-brand); background: var(--hnw-brand); color: #04220E;
}
.hnw-actions button.alt { background: transparent; color: var(--hnw-brand2); }

.hnw-empty {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  font-family: var(--hnw-mono); font-size: 12px; color: var(--hnw-mute); text-align: center; padding: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .hnw-side { transition: none; }
}

/* ---------- inline transaction panel ---------- */
.hnw-tx {
  background: var(--hnw-panel2); border: 1px solid var(--hnw-brand);
  border-radius: 10px; padding: 11px 12px;
}
.hnw-txhead {
  font-family: var(--hnw-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hnw-brand2); margin-bottom: 9px; font-weight: 700;
}
.hnw-txrow { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; }
.hnw-txrow input {
  flex: 1; min-width: 0; font-family: var(--hnw-mono); font-size: 14px; font-weight: 700;
  padding: 8px 9px; border-radius: 7px; border: 1px solid var(--hnw-line);
  background: rgba(0,0,0,.35); color: var(--hnw-ink);
}
.hnw-txrow input:focus-visible { outline: 2px solid var(--hnw-brand2); outline-offset: 1px; }
.hnw-unit { font-family: var(--hnw-mono); font-size: 11px; color: var(--hnw-mute); }
.hnw-txrow button {
  flex: 1; font-family: var(--hnw-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 9px; border-radius: 8px;
  cursor: pointer; border: 1px solid var(--hnw-brand); background: var(--hnw-brand); color: #04220E;
}
.hnw-txrow button.alt { background: transparent; color: var(--hnw-brand2); }
.hnw-txnote { font-family: var(--hnw-mono); font-size: 9.5px; color: var(--hnw-mute); margin: 4px 0 0; line-height: 1.5; }

/* ---------- context strip ---------- */
.hnw-ctx {
  display: flex; flex-wrap: wrap; gap: 6px; max-width: 640px;
}
.hnw-cx {
  background: var(--hnw-panel); border: 1px solid var(--hnw-line);
  border-radius: 8px; padding: 6px 9px; min-width: 74px;
}
.hnw-cx .k {
  display: block; font-family: var(--hnw-mono); font-size: 8.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--hnw-mute);
}
.hnw-cx .v {
  display: block; font-family: var(--hnw-mono); font-size: 14px;
  font-weight: 700; color: var(--hnw-ink); line-height: 1.35;
}
.hnw-cx.zero .v { color: var(--hnw-mute); }
.hnw-cxnote {
  flex-basis: 100%; font-family: var(--hnw-mono); font-size: 9.5px;
  color: var(--hnw-mute); padding: 2px 2px 0; line-height: 1.5;
}
@media (max-width: 900px) { .hnw-ctx { display: none; } }

.hnw-capline.hnw-hold {
  background: rgba(192,199,184,.12); border-color: rgba(192,199,184,.34); color: #D6DCCC;
}
.hnw-capline.hnw-hold b { color: #fff; }

/* ---------- search on the map ---------- */
.hnw-search { position: relative; display: flex; align-items: center; gap: 7px; }
.hnw-search input {
  font-family: var(--hnw-mono); font-size: 11px; color: var(--hnw-ink);
  background: var(--hnw-panel); border: 1px solid var(--hnw-line);
  border-radius: 8px; padding: 6px 10px; width: 210px; line-height: 1.2;
}
.hnw-search input::placeholder { color: var(--hnw-mute); }
.hnw-search input:focus-visible { outline: 2px solid var(--hnw-brand2); outline-offset: 1px; }
.hnw-qn { font-family: var(--hnw-mono); font-size: 10px; color: var(--hnw-brand2); white-space: nowrap; }
.hnw-qlist {
  position: absolute; top: 100%; left: 0; margin-top: 5px; z-index: 5;
  width: 260px; max-height: 250px; overflow-y: auto;
  background: var(--hnw-panel); border: 1px solid var(--hnw-line);
  border-radius: 9px; padding: 4px; overscroll-behavior: contain;
}
.hnw-qlist button {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 6px;
}
.hnw-qlist button:hover { background: var(--hnw-panel2); }
.hnw-qlist .nm { font-size: 12px; color: var(--hnw-ink); }
.hnw-qlist .mt { font-family: var(--hnw-mono); font-size: 9px; color: var(--hnw-mute); }
.hnw-qlist .more { font-family: var(--hnw-mono); font-size: 9px; color: var(--hnw-mute); padding: 5px 8px; }

/* ---------- collapsible detail sections ---------- */
.hnw-sect summary {
  font-family: var(--hnw-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hnw-mute); padding: 10px 12px;
  font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center;
}
.hnw-sect summary::-webkit-details-marker { display: none; }
.hnw-sect summary::after { content: "+"; margin-left: auto; font-size: 13px; line-height: 1; }
.hnw-sect[open] summary::after { content: "\2212"; }
.hnw-sect summary:hover { color: var(--hnw-ink2); }
.hnw-sect[open] .hnw-kv { padding-top: 2px; }

/* ---------- badges ---------- */
.hnw-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; }
.hnw-badge i { font-style: normal; font-size: 11px; line-height: 1; }
/* Not live yet — visible on purpose, so people can see what is coming. */
.hnw-flag.off { opacity: .38; border-style: dashed; }

/* ---------- inline note under the card actions ---------- */
.hnw-note {
  font-family: var(--hnw-mono); font-size: 10px; line-height: 1.5;
  color: var(--hnw-ink2); background: var(--hnw-panel2);
  border: 1px solid var(--hnw-line); border-left: 2px solid var(--hnw-brand);
  border-radius: 7px; padding: 7px 9px; word-break: break-all;
}
.hnw-note.ok { border-left-color: var(--hnw-brand2); color: var(--hnw-brand2); }

/* ---------- KPI tiles: one line per label ---------- */
/* The labels are one word each now ("Higher score" is two but fits), so the
   reserved second line that kept them aligned is no longer needed. */
.hnw-strip .k { min-height: 0; white-space: nowrap; }
.hnw-strip div { padding: 8px 9px; }
.hnw-strip .v { font-size: 16px; margin-top: 3px; }

/* ---------- stake lives in the bar, not on a person ---------- */
.hnw-hudwrap { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.hnw-hud { position: static; }
.hnw-btn.hnw-stake { border-color: var(--hnw-brand); color: var(--hnw-brand2); }
.hnw-hudtx, .hnw-mapnote { width: 280px; max-width: 70vw; }
.hnw-mapnote { background: var(--hnw-panel); }


/* ---------- the panel floats ON the network, so every box is solid ---------- */
/* Julian, 4.9.: "die kästen oben sollten natürlich trotzdem gut zu sehen sein,
   also gut mit background." Opaque fill plus a soft shadow to lift them off
   the dots — a translucent panel over a moving field is unreadable. */
.hnw-live, .hnw-tag, .hnw-cx, .hnw-search input, .hnw-qlist {
  background: #12160F;
  box-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.hnw-tag[aria-pressed="true"] { background: var(--hnw-brand); }
.hnw-legend {
  background: #12160F; border: 1px solid var(--hnw-line);
  border-radius: 8px; padding: 5px 9px; box-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.hnw-btn, .hnw-hudtx, .hnw-mapnote { box-shadow: 0 2px 10px rgba(0,0,0,.55); }

/* ---------- buy, between the account and stake ---------- */
.hnw-btn.hnw-buy {
  text-decoration: none; display: inline-flex; align-items: center;
  border-color: var(--hnw-line); color: var(--hnw-ink);
}
.hnw-btn.hnw-buy:hover { border-color: var(--hnw-brand); color: var(--hnw-brand2); }