/* =========================================================================
   ecosystem-strip — cross-site wayfinding chrome. Issue #224.
   Tokens from webshield-navy.css (vendored WebShield navy system).
   Content contract shared with webshield.io (webshield-dev/website#61)
   and qpncatalyst.io (webshield-dev/qpn-catalyst-email#128) — the markup
   is mirrored byte-identical on every page that carries the shared nav.
   Visual register matches webshield.io's v2 (Rich, 2026-06-12): the
   sibling sites should read as one network bar.

   Shape: one near-black line above the shared nav. Network label on the
   left in gold mono (the wordmark of the bar), the three live-site
   entries on the right in fixed order QPN Catalyst → QPN Accelerators →
   QPN Architecture (QPN role names per the 2026-06-12 contract update;
   this site, ep3foundation.org, is QPN Accelerators). The current site
   is a non-link with a you-are-here treatment: tinted ground + gold
   accent edge. The strip is NOT sticky — it scrolls away and the nav's
   own position:sticky takes over.

   Ground: ink darkened to ~#06101E via color-mix (52% ink on black) so
   the strip sits visibly behind/below the nav's ink gradient; flat ink
   fallback where color-mix is unsupported. 40px tall vs the nav's ~56px,
   separated from the nav by a bone hairline (not the nav's gold one) —
   it must read as network chrome, not site nav. No AOS attributes: the
   strip is visible immediately, no entrance animation.

   Two golds on purpose: the label text uses the brighter #A3823A
   (--ws-accent-hover) because base gold #8A6B2E only hits ~3.9:1
   contrast on the #06101E ground — fails WCAG AA; the brighter one is
   ~5.3:1. The pill's accent edge keeps #8A6B2E (--ws-accent), where
   contrast rules don't apply to a decorative rule.

   Mobile: ≤720px (the shared-chrome breakpoint) swaps each full name for
   its terse twin via the __full/__short span pairs — label QPN; roster
   Catalyst · Accelerators · Architecture — so the strip holds one line
   down to 375px. __short spans are aria-hidden; __full spans are
   visually hidden but kept in the accessibility tree (clip technique,
   not display:none) so screen readers always get the full names.

   Initiative detail pages load Bootstrap after this file for legacy
   parts content — color and text-decoration are set explicitly below so
   Bootstrap's link reboot can't bleed through.
   ========================================================================= */

.ws-ecostrip {
  background: var(--ws-ink); /* fallback where color-mix is unsupported */
  background: color-mix(in srgb, var(--ws-ink) 52%, black); /* ≈ #06101E */
  border-bottom: 1px solid rgba(246, 243, 236, 0.12); /* bone hairline — same recipe as .ws-footer__copy */
  font-family: var(--ws-font-body);
}

.ws-ecostrip__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  white-space: nowrap;
}

/* ── Network label (→ local /ecosystem.html page) ─────────────────── */
.ws-ecostrip__label {
  font-family: var(--ws-font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-accent-hover); /* AA-contrast gold — see header note */
  text-decoration: none;
}
.ws-ecostrip__label:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Site roster ──────────────────────────────────────────────────── */
.ws-ecostrip__sites {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ws-ecostrip__sites a {
  color: var(--ws-page);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.72;
}
.ws-ecostrip__sites a:hover { opacity: 1; }

.ws-ecostrip__sep {
  color: var(--ws-page);
  opacity: 0.35;
  font-size: 12px;
}

/* You-are-here — tinted ground + accent edge (horizontal adaptation of
   the 2026-06-12 switcher exploration's bone-tint + gold-edge idiom). */
.ws-ecostrip__current {
  font-size: 11px;
  font-weight: 600;
  color: var(--ws-page);
  background: rgba(246, 243, 236, 0.08);
  box-shadow: inset 0 -2px 0 var(--ws-accent);
  padding: 3px 8px;
  border-radius: 2px;
}

/* ── Terse variant (full ↔ short swap) ────────────────────────────── */
.ws-ecostrip__short { display: none; }

@media (max-width: 720px) {
  .ws-ecostrip__wrap { min-height: 34px; }
  .ws-ecostrip__sites { gap: 10px; }
  .ws-ecostrip__short { display: inline; }
  /* Visually hidden, still announced — keeps the full names readable
     by screen readers at every width (contract requirement). */
  .ws-ecostrip__full {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }
}

/* Below 480px the 48px gutters would crowd the terse line toward
   page-level horizontal scroll; tighten them before that happens. */
@media (max-width: 480px) {
  .ws-ecostrip__wrap { padding: 0 24px; }
}