/* =========================================================================
   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;
  align-self: stretch; /* full strip height so the active tab can reach the bottom edge (connects to the nav below) */
}
.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 — connected "folder tab" (Rich, 2026-06-16, per his mockup).
   The current site rises out of the nav into the strip as a navy tab with
   rounded top corners, filled with the nav's --ws-ink so it reads as one
   piece with the bar below; bone text like the nav. Stretches to the full
   strip height (flat bottom meets the nav) with a small top gap; the muted
   roster links beside it are the inactive tabs. */
.ws-ecostrip__current {
  align-self: stretch;
  margin-top: 5px;
  margin-bottom: -1px; /* bridge the strip's 1px bone hairline so the tab meets the nav seamlessly */
  display: flex;
  align-items: center;
  font-size: var(--ws-fs-label);
  font-weight: 600;
  color: var(--ws-page);
  background: var(--ws-ink-deep); /* the nav's right-side gradient stop — the tab sits on the right, so this matches the bar it descends into */
  padding: 0 18px;
  border-radius: 6px 6px 0 0;
}
/* >>> ecostrip-icons (generated from brand/icon-system mono marks) */
/* QPN "Crystal" marks before each strip entry, drawn as a currentColor mask
   of the mono SVG (alpha) tinted by background:currentColor — so each icon
   inherits that entry's own ink (gold lead / muted roster / bone you-are-here
   / its hover) automatically, and the data-URI keeps everything inside this
   one synced file (no per-site asset). label -> core (the network lead);
   webshield -> Architecture | ep3 -> Accelerators | catalyst -> Catalyst. */
.ws-ecostrip [data-testid="ecosystem-strip-label"]::before,
.ws-ecostrip [data-testid="ecosystem-strip-webshield"]::before,
.ws-ecostrip [data-testid="ecosystem-strip-ep3"]::before,
.ws-ecostrip [data-testid="ecosystem-strip-catalyst"]::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.45em;
  vertical-align: -0.2em;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.ws-ecostrip [data-testid="ecosystem-strip-label"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%208%20L52.78%2020%20L52.78%2044%20L32%2056%20L11.22%2044%20L11.22%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2032%20L32%208%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2020%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226.4%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%208%20L52.78%2020%20L52.78%2044%20L32%2056%20L11.22%2044%20L11.22%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2032%20L32%208%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2020%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226.4%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E"); }
.ws-ecostrip [data-testid="ecosystem-strip-webshield"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%208%20L52.78%2020%20L52.78%2044%20L32%2056%20L11.22%2044%20L11.22%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2032%20L32%208%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2044%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L32%2056%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2044%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2020%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226.4%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%208%20L52.78%2020%20L52.78%2044%20L32%2056%20L11.22%2044%20L11.22%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2032%20L32%208%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2044%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L32%2056%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2044%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2020%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226.4%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E"); }
.ws-ecostrip [data-testid="ecosystem-strip-ep3"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%201%20L58.84%2016.5%20L58.84%2047.5%20L32%2063%20L5.16%2047.5%20L5.16%2016.5%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.28%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%204%20L56.25%2018%20L56.25%2046%20L32%2060%20L7.75%2046%20L7.75%2018%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.55%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%208%20L52.78%2020%20L52.78%2044%20L32%2056%20L11.22%2044%20L11.22%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2032%20L32%208%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2020%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226.4%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%201%20L58.84%2016.5%20L58.84%2047.5%20L32%2063%20L5.16%2047.5%20L5.16%2016.5%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.28%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%204%20L56.25%2018%20L56.25%2046%20L32%2060%20L7.75%2046%20L7.75%2018%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.55%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%208%20L52.78%2020%20L52.78%2044%20L32%2056%20L11.22%2044%20L11.22%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2032%20L32%208%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2020%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226.4%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E"); }
.ws-ecostrip [data-testid="ecosystem-strip-catalyst"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%208%20L52.78%2020%20L52.78%2044%20L32%2056%20L11.22%2044%20L11.22%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2032%20L32%208%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2020%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2025%20L32%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M37.6%2028.5%20L41.5%2026.5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M37.6%2035.5%20L41.5%2037.5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2039%20L32%2044%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M26.4%2035.5%20L22.5%2037.5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M26.4%2028.5%20L22.5%2026.5%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%225%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%208%20L52.78%2020%20L52.78%2044%20L32%2056%20L11.22%2044%20L11.22%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2032%20L32%208%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L52.78%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2032%20L11.22%2020%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2025%20L32%2020%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M37.6%2028.5%20L41.5%2026.5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M37.6%2035.5%20L41.5%2037.5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M32%2039%20L32%2044%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M26.4%2035.5%20L22.5%2037.5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M26.4%2028.5%20L22.5%2026.5%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%225%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E"); }

/* Mobile: the terse bar is tuned to hold one line down to 375px WITHOUT icons;
   four marks add ~80px and overflow it (horizontal scroll). The marks are a
   desktop refinement — drop them at the terse breakpoint, where the strip is
   the clean text line it is today. */
@media (max-width: 720px) {
.ws-ecostrip [data-testid="ecosystem-strip-label"]::before,
.ws-ecostrip [data-testid="ecosystem-strip-webshield"]::before,
.ws-ecostrip [data-testid="ecosystem-strip-ep3"]::before,
.ws-ecostrip [data-testid="ecosystem-strip-catalyst"]::before { display: none; }
}
/* <<< ecostrip-icons */

/* ── 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; }
}