/* =========================================================================
   ecosystem-strip — cross-site wayfinding chrome. v2.0.
   Sources from webshield-navy.css. Brief: docs/brief-ecosystem-strip.md
   (content contract shared with ep3foundation.org / qpncatalyst.io —
   issue #61; the markup below is mirrored byte-identical on all pages).

   Shape: one near-black line above the shared nav. Network label on the
   left (mono, tracked, gold — the lead element since v2), the three
   live-site entries on the right in fixed order QPN Catalyst →
   QPN Accelerators → QPN Architecture (Rich, 2026-06-12: role names
   replace the org names EP3 Foundation / WebShield in strip + footer
   chrome only; the current site sits last). 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.

   v2 register (Rich, 2026-06-12 — supersedes v1's "quieter than
   everything" rule): the strip asserts itself. Ground is ink pulled
   ~50% toward black so it stands apart from the nav's gradient, and the
   Quantum Privacy Network label leads — gold, body-sm, full opacity.
   The roster stays muted and the you-are-here pill dropped a size, so
   the bar still reads as one line of network chrome sitting under the
   taller, busier site nav: more present than v1, still subordinate.

   Mobile: ≤720px (the shared-chrome breakpoint) swaps each full name for
   its terse twin via the __full/__short span pairs 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.

   Usage:
     <nav class="ws-ecostrip" aria-label="Quantum Privacy Network ecosystem"
          data-testid="ecosystem-strip">
       <div class="ws-ecostrip__wrap">
         <a class="ws-ecostrip__label" href="/ecosystem">
           <span class="ws-ecostrip__full">Quantum Privacy Network</span><span class="ws-ecostrip__short" aria-hidden="true">QPN</span>
         </a>
         <span class="ws-ecostrip__sites">
           <a href="https://qpncatalyst.io/">…full/short pair…</a>
           <span class="ws-ecostrip__sep" aria-hidden="true">·</span>
           <a href="https://ep3foundation.org/">…full/short pair…</a>
           <span class="ws-ecostrip__sep" aria-hidden="true">·</span>
           <span class="ws-ecostrip__current" aria-current="true">…full/short pair: QPN Architecture…</span>
         </span>
       </div>
     </nav>

   Loaded on the two Bootstrap legacy pages too — color and text-decoration
   are set explicitly below so Bootstrap's link reboot can't bleed through.
   ========================================================================= */

.ws-ecostrip {
  /* v2 ground: ink pulled ~50% toward black — visibly darker than the
     nav's ink→ink-deep gradient so the strip stands apart. color-mix
     keeps the value sourced from the locked palette (no new hex); the
     flat-ink line above it is the fallback where color-mix is
     unsupported. */
  background: var(--ws-ink);
  background: color-mix(in srgb, var(--ws-ink) 52%, black);
  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; /* v2: 36 → 40 — still inside the contract's 32–40px band */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  white-space: nowrap;
}

/* ── Network label (→ local /ecosystem page) ──────────────────────────
   v2: the lead element — gold, body-sm, full opacity (was micro @ 0.62).
   --ws-accent-hover rather than --ws-accent: the base gold sits at
   ~3.9:1 on the v2 ground — fails WCAG AA for 13.5px text — while the
   brighter stop is ~5.3:1. Weight 500 is the heaviest JetBrains Mono
   weight the pages load (400;500); don't ask for 600+ or the browser
   synthesizes a smeared faux-bold. */
.ws-ecostrip__label {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-body-sm);
  font-weight: 500;
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-accent-hover);
  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).
   v2: dropped a size (12px → label token, tighter padding) so the
   network label leads the strip and the site entry recedes. */
.ws-ecostrip__current {
  font-size: var(--ws-fs-label);
  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; }
  /* The v2 role-name twins ("Accelerators", "Architecture") run longer
     than v1's ("EP3", "WebShield") — tighten the roster so the line
     still holds at 375px. */
  .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 overflow the terse line — the v2
   role-name twins are longer than v1's (page-level horizontal scroll
   otherwise); tighten the gutters before that happens. */
@media (max-width: 480px) {
  .ws-ecostrip__wrap { padding: 0 24px; }
}