/* ═══════════════════════════════════════════════════════════════════════════════════════════
   WHEW Capital — a11y + motion hardening (handoff §5)
   ADDITIVE stylesheet. No design-intent overrides: colors used are the existing brand palette
   (#4f9bff focus, #7c8aa5 readable-mono). Load AFTER each page's own <style> block on all five
   production pages. `!important` is required only where inline styles must be out-ranked.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1) Focus visibility ─────────────────────────────────────────────────────────────────────
   The prototype has hover styles only. Every interactive element gets a :focus-visible ring in
   the existing accent blue. Mouse clicks are unaffected (:focus-visible, not :focus). */
.wCta:focus-visible,
.cpCta:focus-visible,
.gpCta:focus-visible,
.rlCta:focus-visible,
.eBtn:focus-visible,
.eSkip:focus-visible,
.cpTrack:focus-visible,
.cpRow:focus-visible,
.gpDoc:focus-visible,
.gpEv:focus-visible,
.gpNavItem:focus-visible,
.wNav a:focus-visible,
.cpNav a:focus-visible,
.rlNav a:focus-visible,
a:focus-visible {
  outline: 2px solid #4f9bff !important;
  outline-offset: 2px;
}

.cpInput:focus-visible,
.gpInput:focus-visible {
  outline: 2px solid #4f9bff !important;
  outline-offset: 1px;
}

/* Keyboard operability companion (JS/markup, cannot ship in CSS) — handoff §5:
   give clickable rows tabindex="0" + Enter/Space activation.
   ▸ Add  tabindex="0" role="button"  to these template elements:
       Governance Portal.dc.html : <div class="gpNavItem" …>, <div class="gpDoc" …>,
                                   <div class="gpEv" …>, the SIGN OUT div, the AUTHENTICATE div
       Counterparty Access.dc.html: <div class="cpTrack" …>, <div class="cpRow" …>,
                                   the confirm checkbox div (role="checkbox"
                                   aria-checked="{{ confirmMark }}"), the submit div
       Enter WHEW.dc.html        : the ENTER THE FIRM .eBtn div
   ▸ Add once per page in componentDidMount (delegated; removed in componentWillUnmount):
       this._keyAct = (e) => {
         if ((e.key === "Enter" || e.key === " ") &&
             e.target.matches(".gpDoc,.gpEv,.gpNavItem,.cpRow,.cpTrack,.eBtn,[role='button'],[role='checkbox']")) {
           e.preventDefault(); e.target.click();
         }
       };
       document.addEventListener("keydown", this._keyAct);
*/

/* ── 2) Informational mono microcopy — contrast/size floor (handoff §5 priority list) ────────
   Decorative labels stay untouched. Only the four named informational groups move to
   ≥ #7c8aa5 / ≥ 11px. */

/* 2a. Form labels (they immediately precede their input — structural, no restyle) */
div:has(+ .cpInput),
div:has(+ .gpInput),
div:has(+ textarea.cpInput) {
  color: #7c8aa5 !important;
  font-size: 11px !important;
}

/* 2b. Portal session log (sidebar, last .gpMeta block). Size floor for all rows; color floor for
   the non-latest rows only — the newest row keeps its green "live" color, which already passes. */
.gpSide .gpMeta:last-child > div:last-child > div {
  font-size: 11px !important;
}
.gpSide .gpMeta:last-child > div:last-child > div:not(:first-child) {
  color: #7c8aa5 !important;
}
/* …and the "SESSION LOG — RECORDED" caption above it */
.gpSide .gpMeta:last-child span[style] {
  color: #7c8aa5 !important;
}

/* 2c. Counterparty manifest chips — size floor via grid position (color is JS-inline; see 2e) */
.cpRow > div:first-child > div:nth-child(3) {
  font-size: 11px !important;
}

/* 2d. Manifest row numbers + "CLASSIFIED" inline label inside rows */
.cpRow > div:first-child > div:first-child {
  color: #7c8aa5 !important;
  font-size: 11px !important;
}

/* 2e. Companion inline-style edits (JS-set styles CSS cannot reach without collateral) —
   exact string replacements, one line each:
   ▸ Counterparty Access.dc.html, renderVals() manifest chipStyle:
       before:  fontSize: "10px", letterSpacing: ".12em", padding: "5px 11px",
       after :  fontSize: "11px", letterSpacing: ".12em", padding: "5px 11px",
       before:  color: m.redacted ? "#4a5570" : "#3fe0a0",
       after :  color: m.redacted ? "#7c8aa5" : "#3fe0a0",
   ▸ Counterparty Access.dc.html, template row (step 02):
       before:  <span style="font-size:11px;color:#4a5570;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em">CLASSIFIED</span>
       after :  <span style="font-size:11px;color:#7c8aa5;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em">CLASSIFIED</span>
   ▸ Governance Portal.dc.html, renderVals() logRows style:
       before:  fontSize: "8.5px", letterSpacing: ".04em", color: i === 0 ? "#3fe0a0" : "#4a5570",
       after :  fontSize: "11px",  letterSpacing: ".04em", color: i === 0 ? "#3fe0a0" : "#7c8aa5",
   ▸ Footer containers (informational contact + boundary lines at 10.5px #4a5570):
       Counterparty Access.dc.html footer div:
       before:  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:#4a5570
       after :  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:#7c8aa5
       (apply the same substitution to the equivalent footer container in
        WHEW Capital v2.dc.html and Research Labs.dc.html)
   ▸ Governance Portal.dc.html login-screen footer line:
       before:  <div style="text-align:center;margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#3a4358">SESSIONS ARE LOGGED · STRUCTURE VISIBLE · TACTICS PRIVATE</div>
       after :  <div style="text-align:center;margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:#7c8aa5">SESSIONS ARE LOGGED · STRUCTURE VISIBLE · TACTICS PRIVATE</div>
*/

/* ── 3) prefers-reduced-motion ────────────────────────────────────────────────────────────────
   Freezes every CSS loop on all five pages: gate ePulse/eBounce/eBlink, homepage wMarquee +
   wEq/wLadder ladder-tape loops + wPulse/wBlink/wDash, labs rlTape/rlTravel/rlLadder/rlSeal/
   rlStage, counterparty cpBar/cpSweep/cpSheen/cpGlitch, portal gpScan/gpPulse/gpBlink/gpDash.
   Entrance animations (…Rise/…Fade, fill-mode both) complete instantly at their end state, so
   nothing is left invisible. Canvases (gate starfield + warp burst, homepage chart canvas,
   counterparty/portal cipher fields) are decorative and JS-driven — they are hidden outright. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  canvas {
    display: none !important;
  }
  /* the gate's skip affordance becomes primary under reduced motion */
  .eSkip {
    color: #f2f5fb;
    border-color: #4f9bff;
  }
}
/* Companion (JS, optional but recommended): gate the requestAnimationFrame loops too —
   at the top of each componentDidMount canvas block:
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { … skip draw loop … }
   The gate's scroll choreography (Enter WHEW.dc.html) is JS transforms, not CSS animation;
   the SKIP link below is the reduced-motion bypass the handoff requires. */

/* ── 4) Gate skip link — bypasses the scroll choreography (handoff §5) ───────────────────────
   Markup (insert in Enter WHEW.dc.html as the LAST child of the fixed stage div, after the L5
   block — at deploy the href becomes /firm):

     <a class="eSkip" href="WHEW Capital v2.dc.html">SKIP — ENTER THE FIRM →</a>
*/
.eSkip {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 1001; /* above the exit overlay (1000) and grain (998) */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  color: #7c8aa5;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(4, 5, 10, .8);
  padding: 9px 16px;
  transition: color .18s, border-color .18s;
}
.eSkip:hover {
  color: #f2f5fb;
  border-color: #4f9bff;
}

/* ── 5) Screen-reader support ────────────────────────────────────────────────────────────────
   [aria-hidden] notes (markup attributes, listed here so the patch set is one unit):
   ▸ Add  aria-hidden="true"  to every decorative element:
       - all <canvas ref="{{ canvasRef }}" …> elements (gate starfield/warp, homepage hero
         chart, counterparty secure-channel cipher, portal login cipher)
       - every <div class="grain">
       - the animated equalizer/bar-cluster divs (homepage MARKET-STATE FEED bars, counterparty
         ENCRYPTED bars, the 5-bar logo marks — the adjacent "WHEW CAPITAL" text carries the name)
       - the scroll ring on the gate (the pct readout is choreography chrome)
   ▸ Gate text alternative (handoff §5): insert as the first child of the gate's fixed stage,
     using the utility class below —

     <div class="visually-hidden">
       WHEW Capital — proprietary trading infrastructure.
       Markets are measured. Execution is governed. Evidence before authority.
       You are entering WHEW Capital.
     </div>
*/
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}