/* Hive new primitive block.
   Dropped into partner and use case pages by
   scripts/apply_partner_new_primitives.py.

   Every colour reads from the host page first and only falls back to the Hive
   default when the page does not define that variable. That way the block takes
   on each page's own palette instead of importing a foreign one. Class names are
   all namespaced hvnp so they cannot collide with a page's own styles.

   Gold is never used here. Blue is product and action. Green is a pass verdict.
*/

.hvnp{
  --hvnp-bg: var(--hull, var(--panel, var(--card, #0a1224)));
  --hvnp-bg2: var(--hull-2, var(--void, var(--bg, #071020)));
  --hvnp-line: var(--line, var(--border, #1b3a58));
  --hvnp-blue: var(--blue, var(--accent, #2F80FF));
  --hvnp-blue-soft: var(--blue-soft, var(--accent-soft, #7ecfff));
  --hvnp-green: var(--green, var(--ok, #34D399));
  --hvnp-hot: var(--hot, var(--bad, #ff8da6));
  --hvnp-text: var(--star, var(--fg, var(--text, #ffffff)));
  --hvnp-muted: var(--muted, #b6c7dc);
  --hvnp-dim: var(--dim, #7d8ea3);
  --hvnp-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  padding:64px 20px;
  border-top:1px solid var(--hvnp-line);
  background:var(--hvnp-bg2);
  color:var(--hvnp-text);
  text-align:left;
}
.hvnp *,.hvnp *::before,.hvnp *::after{text-align:inherit}
.hvnp__wrap{max-width:1140px;margin:0 auto;text-align:left}
.hvnp__k{
  display:block;text-align:left;font-family:var(--hvnp-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hvnp-blue-soft);margin:0 0 14px;
}
.hvnp__h{font-size:clamp(24px,3.2vw,36px);line-height:1.15;margin:0 0 14px;font-weight:600}
.hvnp__lede{font-size:16px;line-height:1.62;color:var(--hvnp-muted);max-width:74ch;margin:0 0 34px}
.hvnp__grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:900px){.hvnp__grid.two{grid-template-columns:1fr 1fr}}

.hvnp-c{
  border:1px solid var(--hvnp-line);border-radius:14px;background:var(--hvnp-bg);
  padding:24px;display:flex;flex-direction:column;gap:14px;
}
/* Dotted canon type. This is the name of the primitive, so it is set as a
   display line rather than a small label. Blue at the head fading to the page's
   own text colour at the tail, so it reads as product first and lands on the
   page palette. The gradient is only applied where background-clip on text is
   supported. Everywhere else the plain blue-soft colour below still shows. */
.hvnp-c__t{
  display:block;font-family:var(--hvnp-mono);font-weight:600;
  font-size:clamp(15.5px,1.55vw,18.5px);line-height:1.2;letter-spacing:.035em;
  text-transform:none;color:var(--hvnp-blue-soft);
  padding-bottom:11px;margin-bottom:1px;position:relative;
}
.hvnp-c__t::after{
  content:"";position:absolute;left:0;bottom:0;width:74px;height:1px;
  background:linear-gradient(90deg,var(--hvnp-blue) 0%,rgba(138,182,255,.55) 62%,transparent 100%);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hvnp-c__t{
    background-image:linear-gradient(96deg,var(--hvnp-blue) 0%,var(--hvnp-blue-soft) 46%,var(--hvnp-text) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .hvnp-c__t::after{-webkit-text-fill-color:initial}
}
.hvnp-c__n{font-size:20px;line-height:1.25;margin:0;font-weight:600}
.hvnp-c__p{font-size:15px;line-height:1.65;color:var(--hvnp-muted);margin:0}
.hvnp-c__p b{color:var(--hvnp-text);font-weight:600}
.hvnp-c__no{font-size:13.5px;line-height:1.6;color:var(--hvnp-dim);margin:0;padding-left:12px;border-left:2px solid var(--hvnp-line)}
.hvnp-c__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.hvnp-a{
  font-family:var(--hvnp-mono);font-size:12px;letter-spacing:.04em;text-decoration:none;
  border:1px solid var(--hvnp-line);border-radius:999px;padding:7px 14px;
  color:var(--hvnp-blue-soft);background:transparent;transition:border-color .15s,color .15s;
}
.hvnp-a:hover{border-color:var(--hvnp-blue);color:var(--hvnp-blue)}
.hvnp-a.solid{background:var(--hvnp-blue);border-color:var(--hvnp-blue);color:#04121f;font-weight:600}
.hvnp-a.solid:hover{color:#04121f;filter:brightness(1.08)}

.hvnp-run{border:1px solid var(--hvnp-line);border-radius:12px;padding:18px;background:var(--hvnp-bg2)}
.hvnp-run__hd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px}
.hvnp-run__rt{font-family:var(--hvnp-mono);font-size:11.5px;color:var(--hvnp-dim);word-break:break-all}
.hvnp-run__btns{display:flex;flex-wrap:wrap;gap:8px}
.hvnp-b{
  font-family:var(--hvnp-mono);font-size:12px;cursor:pointer;border-radius:8px;padding:8px 13px;
  border:1px solid var(--hvnp-blue);background:var(--hvnp-blue);color:#04121f;font-weight:600;
}
.hvnp-b.ghost{background:transparent;color:var(--hvnp-blue-soft);border-color:var(--hvnp-line);font-weight:400}
.hvnp-b:disabled{opacity:.45;cursor:default}
.hvnp-out{font-family:var(--hvnp-mono);font-size:12px;line-height:1.55;color:var(--hvnp-muted);margin:0}
.hvnp-out pre{
  margin:10px 0 0;padding:12px;border:1px solid var(--hvnp-line);border-radius:8px;
  background:var(--hvt-scrim);max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-size:11.5px;color:var(--hvnp-muted);
}
.hvnp-tag{
  display:inline-block;font-family:var(--hvnp-mono);font-size:10.5px;letter-spacing:.06em;
  border:1px solid var(--hvnp-line);border-radius:999px;padding:3px 9px;margin:0 6px 6px 0;color:var(--hvnp-dim);
}
.hvnp-tag.ok{border-color:var(--hvnp-green);color:var(--hvnp-green)}
.hvnp-tag.no{border-color:var(--hvnp-hot);color:var(--hvnp-hot)}
.hvnp-tag.info{border-color:var(--hvnp-blue-soft);color:var(--hvnp-blue-soft)}
.hvnp__foot{
  margin:30px 0 0;font-size:13px;line-height:1.6;color:var(--hvnp-dim);max-width:80ch;
  padding-top:18px;border-top:1px solid var(--hvnp-line);
}