/* =========================================================================
   QPN Catalyst — ecosystem strip (cross-site wayfinding chrome).

   A slim one-line bar above the shared header on every page, identifying
   the three live Quantum Privacy Network sites. The HTML block is mirrored
   chrome (see the ECOSYSTEM STRIP comment in each page); its content
   contract — label, display names, order (QPN Catalyst → QPN Accelerators
   → QPN Architecture; QPN role names per the 2026-06-12 contract update,
   while URLs and data-testids keep the org slugs), terse twins — is shared
   verbatim with webshield.io and ep3foundation.org.

   VISUAL PARITY (Rich, 2026-06-12): pixel-matched to webshield.io's
   site/css/ecosystem-strip.css, superseding the earlier native-skin-per-
   site approach. Values are deliberate literals — webshield's --ws-*
   tokens resolved (near-black navy bar #06101E, bone #F6F3EC text, golds
   #A3823A / #8A6B2E) — NOT the local --qpn-* tokens, so this file tracks
   webshield's source of truth; update it from their file, not from the
   Catalyst palette. Two golds on purpose: #A3823A label text clears WCAG
   AA on the dark bar (~5.3:1; base gold #8A6B2E is only ~3.9:1 there),
   while the pill's #8A6B2E edge is non-text where contrast rules don't
   apply. Requires JetBrains Mono 500 and Inter 500/600 in each page's
   Google Fonts <link>.

   NOT sticky — scrolls away; the nav's own sticky behavior is unchanged.
   No JavaScript.
   ========================================================================= */

.qpn-ecostrip {
  background: #0B1F3A;  /* fallback where color-mix is unsupported */
  background: color-mix(in srgb, #0B1F3A 52%, black);  /* → #06101E */
  border-bottom: 1px solid rgba(246, 243, 236, 0.12);
}

.qpn-ecostrip__wrap {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 40px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  white-space: nowrap;  /* the strip holds one line at every width */
}

/* ── Label — network name, linking to the local ecosystem page ──────────── */
.qpn-ecostrip__label {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A3823A;
  text-decoration: none;
  flex: none;
}
.qpn-ecostrip__label:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Site roster ────────────────────────────────────────────────────────── */
.qpn-ecostrip__sites {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.qpn-ecostrip__sites a {
  color: #F6F3EC;
  opacity: 0.72;
  text-decoration: none;
}
.qpn-ecostrip__sites a:hover { opacity: 1; }

.qpn-ecostrip__sep {
  color: #F6F3EC;
  opacity: 0.35;
  font-size: 12px;
}

/* You-are-here pill — bone tint + gold bottom edge on the current site
   (non-link). */
.qpn-ecostrip__current {
  font-size: 11px;
  font-weight: 600;
  color: #F6F3EC;
  background: rgba(246, 243, 236, 0.08);
  box-shadow: inset 0 -2px 0 #8A6B2E;
  border-radius: 2px;
  padding: 3px 8px;
}

.qpn-ecostrip a:focus-visible {
  outline: 2px solid #A3823A;
  outline-offset: 2px;
  border-radius: 2px;
  opacity: 1;
}

/* ── Terse variant — full/short span swap, CSS only ─────────────────────── */
/* Desktop: short spans (aria-hidden in markup) stay off. */
.qpn-ecostrip__short { display: none; }

@media (max-width: 720px) {
  .qpn-ecostrip__wrap { min-height: 34px; }
  .qpn-ecostrip__sites { gap: 10px; }

  /* Swap to the terse names visually; the full names remain in the
     accessibility tree (clip pattern — the short spans are aria-hidden). */
  .qpn-ecostrip__full {
    position: absolute;
    width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .qpn-ecostrip__short { display: inline; }
}

@media (max-width: 480px) {
  .qpn-ecostrip__wrap { padding: 0 24px; }
}

/* ── Print — wayfinding chrome, off like the rest (see qpn-shared.css) ──── */
@media print {
  .qpn-ecostrip { display: none; }
}