/* ============================================================
   NEUROBOTICS IP — shared timing-fabric (hybrid) styles
   Token-based, so it recolors per page:
     • the wavefront / clock / synced sensors take  --accent
     • capture events take                          --accent-2
   Used by version-6.html and version-7.html hero, and the
   "Fabric Concept — Hybrid" study page.
   ============================================================ */

/* dense medium */
.hdot { fill: var(--muted); }
.hring { fill: none; stroke: var(--accent); stroke-width: 1.8; }

/* sensors — carry their modality icon */
.hsens .ring { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.6; transition: stroke .25s, stroke-width .25s, fill .25s; }
.hsens .ico { fill: none; stroke: var(--fg-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.hsens .ico .fill { fill: var(--fg-2); stroke: none; transition: fill .25s; }
.hsens.on .ring { stroke: var(--accent); stroke-width: 2.6; fill: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); }
.hsens.on .ico { stroke: var(--accent); }
.hsens.on .ico .fill { fill: var(--accent); }
.hsens.pulse .ring { stroke: var(--accent-2); stroke-width: 3; }
.hsens.pulse .ico { stroke: var(--accent-2); }
.hsens.jit .ring { stroke: color-mix(in srgb, var(--accent) 55%, var(--muted)); stroke-width: 2.4; }
.hsens.jit .ico { stroke: color-mix(in srgb, var(--accent) 55%, var(--muted)); }

/* clock */
.hclk .ring { fill: var(--surface); stroke: var(--muted); stroke-width: 2.2; transition: stroke .5s, stroke-width .15s; }
.hclk .ico { fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.hclk .hlbl { fill: var(--muted); transition: fill .5s; }
.hclk.live .ring { stroke: var(--accent); }
.hclk.live .ico { stroke: var(--accent); }
.hclk.live .hlbl { fill: var(--accent); }
.hclk.beat .ring { stroke-width: 4; }
/* drift: clock is dormant — barely visible, no shared reference yet */
@keyframes hclkSearch { 0%, 100% { stroke-opacity: .09; } 50% { stroke-opacity: .24; } }
.hclk.searching .ring { animation: hclkSearch 2.1s ease-in-out infinite; }
.hclk.searching .ico { opacity: .14; }
.hclk.searching .hlbl { opacity: .28; }
/* ignition: clock charges up with a swelling pulse */
@keyframes hclkCharge { from { stroke-width: 2.4; } to { stroke-width: 3.7; } }
.hclk.charging .ring { animation: hclkCharge .42s ease-in-out infinite alternate; }

/* processor */
.hproc .ring { fill: var(--surface); stroke: var(--accent-2); stroke-width: 2.2; transition: stroke-width .15s; }
.hproc .ico { fill: none; stroke: var(--accent-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hproc .ico .core { fill: color-mix(in srgb, var(--accent-2) 16%, var(--surface)); stroke: none; transition: fill .16s; }
.hproc.lock .ico .core { fill: var(--accent-2); }
.hproc .hlbl { fill: var(--accent-2); }
.hproc.lock .ring { stroke-width: 4.4; }
.hproc.warn .ring { stroke: var(--accent); stroke-width: 4.4; }

/* labels + processor readout */
.hlbl { font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; letter-spacing: .1em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.hread { font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: .04em; fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 3.2px; stroke-linejoin: round; }
.hread.lock { fill: var(--accent-2); }
.hread.warn { fill: var(--accent); }
.hsub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.hsub.lock { fill: var(--accent-2); }
.hsub.warn { fill: var(--accent); }

/* capture packets travelling the grid */
.hpkt { pointer-events: none; }
.hpkt.cap .head { fill: var(--accent-2); }
.hpkt.cap .glow { fill: color-mix(in srgb, var(--accent-2) 30%, transparent); }
.hpkt.jit .head { fill: color-mix(in srgb, var(--accent) 50%, var(--muted)); }
.hpkt.jit .glow { fill: color-mix(in srgb, var(--muted) 26%, transparent); }

/* hero status corner reflects BEFORE (drift) / AFTER (locked) */
.hero-visual .corner.r[data-stat] { color: var(--muted); transition: color .4s; }
.hero-visual .corner.r[data-stat] .live { background: var(--muted); transition: background .4s; }
.hero-visual .corner.r[data-stat].after { color: var(--accent); }
.hero-visual .corner.r[data-stat].after .live { background: var(--accent); }