/* ============================================================================
   ecosystem.css — Soqucoin web ecosystem cohesion layer (portable).
   Pairs with ecosystem.js. Uses the research-grade system tokens with
   fallbacks, so it adopts each property's accent while staying structurally
   identical across every site. No cards — rules + mono labels, like the system.
   ============================================================================ */
:root{
  --eco-fg:var(--ink,#1A1712); --eco-bg:var(--paper,#FAF8F3); --eco-bg2:var(--paper-2,#F1ECE1);
  --eco-accent:var(--accent,#7E1D2D); --eco-muted:var(--muted,#6E675B);
  --eco-rule:var(--rule,rgba(26,23,18,.14)); --eco-mono:var(--mono,'IBM Plex Mono',ui-monospace,monospace);
}

/* ---- nav dropdown (native <details> — accessible, no custom toggle JS) ---- */
.eco-nav{position:relative;display:inline-block}
.eco-nav>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;color:var(--eco-muted);font-size:.95rem;transition:color .2s}
.eco-nav>summary::-webkit-details-marker{display:none}
.eco-nav>summary:hover,.eco-nav[open]>summary{color:var(--eco-fg)}
.eco-nav>summary .chev{font-size:.55rem;transition:transform .2s}
.eco-nav[open]>summary .chev{transform:rotate(180deg)}

.eco-panel{position:absolute;right:0;top:calc(100% + .95rem);width:min(92vw,400px);background:var(--eco-bg);border:1px solid var(--eco-rule);box-shadow:0 22px 48px -28px rgba(26,23,18,.45);padding:.5rem;z-index:60}
.eco-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--eco-accent)}
.eco-group{padding:.85rem .85rem .35rem}
.eco-group:first-child{padding-top:.95rem}
.eco-group h5{font-family:var(--eco-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--eco-accent);margin:0 0 .25rem}
.eco-item{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline;padding:.55rem .85rem;text-decoration:none;transition:background .15s}
.eco-item:hover{background:var(--eco-bg2)}
.eco-item[aria-current=page]{pointer-events:none;opacity:.65}
.eco-dot{width:7px;height:7px;border-radius:50%;background:var(--dot,var(--eco-accent));transform:translateY(2px)}
.eco-name{color:var(--eco-fg);font-size:.95rem;font-weight:500;font-family:var(--sans,'IBM Plex Sans',system-ui,sans-serif)}
.eco-here{font-family:var(--eco-mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--eco-muted);margin-left:.5rem;border:1px solid var(--eco-rule);padding:.08rem .32rem;vertical-align:middle}
.eco-desc{display:block;color:var(--eco-muted);font-size:.8rem;margin-top:.12rem}

/* on mobile the nav collapses to a column — render the panel inline, flat */
@media(max-width:720px){
  .eco-nav{display:block}
  .eco-panel{position:static;width:auto;border:none;box-shadow:none;padding:0;margin-top:.25rem}
  .eco-panel::before{display:none}
  .eco-group{padding-left:0;padding-right:0}
  .eco-item{padding-left:0;padding-right:0}
}

/* ---- footer ecosystem column (sits inside the dark footer) ---- */
.foot .eco-dot{background:var(--dot,#cfc9bd)}

/* ---- lattice figure (animated 3D module lattice rendered on <canvas>) ---- */
.lattice3d-fig{margin:0 auto clamp(1.5rem,3vw,2.75rem)}
.lattice3d-fig canvas{display:block;width:100%;max-width:540px;aspect-ratio:23/18;margin-inline:auto}

/* ---- NTT butterfly figure (Dilithium's polynomial transform; generated by ntt.js) ---- */
.ntt-fig{margin:0 auto}
.ntt-fig svg{display:block;width:100%;max-width:430px;height:auto;margin-inline:auto}
.ntt-fig .ntt-e{stroke:var(--eco-fg);stroke-width:1;fill:none;opacity:.16}
.ntt-fig .ntt-n{fill:var(--eco-fg);opacity:.5}
@media(prefers-reduced-motion:no-preference){
  .ntt-fig .ntt-e{animation:nttSweep 5.5s linear infinite}
  .ntt-fig .st0{animation-delay:0s}
  .ntt-fig .st1{animation-delay:.36s}
  .ntt-fig .st2{animation-delay:.72s}
  .ntt-fig .st3{animation-delay:1.08s}
}
@keyframes nttSweep{0%,80%,100%{stroke:var(--eco-fg);opacity:.16}9%{stroke:var(--eco-accent);opacity:.9}}

/* ---- §03 wayfinding mark (five paths fanning from the origin) ---- */
.path-mark{width:50px;height:auto;display:block;margin-bottom:1.1rem}
.path-mark line{stroke:var(--eco-fg);stroke-width:1.3;opacity:.42;stroke-linecap:round}
.path-mark .o{fill:var(--eco-accent)}

/* ---- light/dark toggle (injected into the nav by ecosystem.js) ---- */
.theme-toggle{background:none;border:1px solid var(--eco-rule);color:var(--eco-muted);cursor:pointer;font:inherit;font-size:.95rem;line-height:1;padding:.32rem .5rem;transition:color .2s,border-color .2s}
.theme-toggle:hover{color:var(--eco-fg);border-color:var(--eco-fg)}