Utility classes

Summary

Four global helpers: neura-hidden removes an element for everyone, neura-assistive hides it visually while keeping it readable to screen readers, neura-clear is the float clearfix, and neura-box-shadow applies the standard floating-surface elevation shadow. The hidden-vs-assistive distinction is an accessibility decision, not a styling one (see Accessibility).

When to use

Class	Use it for
`.neura-hidden`	`display: none` - content that should be unavailable to all users under current conditions (an empty state, a not-yet-relevant section). Screen readers skip it too.
`.neura-assistive`	Visually hidden, still announced: text alternatives for things sighted users understand from visual cues alone (icon-only controls, table context, "opens in new window" notes). Uses the clip-rect technique, so it stays in the accessibility tree.
`.neura-clear`	`clear: both` - end a float context (the layout primitives are float-based for AUI parity).
`.neura-box-shadow`	The light elevation shadow used by Neura's floating surfaces (dropdowns, inline dialogs); apply it to your own popups to match.

Examples

The paragraph below contains three spans: a visible one, a neura-hidden one (gone for everyone), and a neura-assistive one (invisible here, but a screen reader announces it). Toggle the hidden span to see class-based show/hide:

This text is visible. This text was hidden - now it isn't. I am extra context that only screen readers announce.

HTML

<p class="neura-hidden">
  I am an element no user should encounter under current conditions.
</p>

<p class="neura-assistive">
  I add extra information for people who can't see a visual cue.
</p>

Show / hide by toggling the class (don't mix with style-based show()/hide() helpers; a stale inline display wins over the class):

el.classList.toggle('neura-hidden');

Accessibility notes

Don't hide critical content behind neura-hidden unless there is a keyboard-accessible way to reveal it.
Don't use neura-assistive as a dumping ground for unrendered templates or SEO text; it is announced to screen-reader users, so it must be genuinely useful spoken content.
Icon-only buttons usually want an aria-label instead of an assistive span; see Accessibility.

AUI compatibility

AUI's unprefixed .hidden and .assistive (used directly by Nsys-era templates) alias onto the Neura rules, including the form.aui variants. CSS-only.