/* demo bundle — generated by build-demo-bundles.mjs; do not hand-edit */
@layer reset, tokens, shell, typography, grammar, components, systems, routes, handles, effects, ornament;

/* /public/css/handles/cognitive-handles.css */
@layer handles {
/* ==========================================================================
   cognitive-handles.css
   --------------------------------------------------------------------------
   Purpose:
   - Semantic affordances for depth, phase, relation, and foldable layers.
   - Handles should read as paper creases and Spw braces, not decoration.
   - Tied directly to the operator palette and precision motion grammar.
   ========================================================================== */

/* ==========================================================================
   1. Handle Tokens & Matrix Mapping
   ========================================================================== */

:root {
    /* Dimensional increments */
    --depth-0: 0px;
    --depth-1: 4px;
    --depth-2: 8px;
    --depth-3: 12px;
    --depth-4: 16px;

    /* Semantic mappings to the Operator matrix */
    --handle-entry:    var(--op-frame-color,  #008080);
    --handle-concept:  var(--op-meta-color,   #324a85);
    --handle-instance: var(--op-object-color, #a67c00);
    --handle-relation: var(--op-merge-color,  #277a87);
    --handle-phase:    var(--op-stream-color, #208259);

    /* Phase specific mappings */
    --phase-initiation:     var(--op-action-color, #005959);
    --phase-resistance:     var(--op-pragma-color, #883a3a);
    --phase-transformation: var(--op-merge-color,  #277a87);
    --phase-expression:     var(--op-stream-color, #208259);
    --phase-return:         var(--op-baseline-color, #594d3f);

    /* Material properties */
    --handle-line:        var(--line, rgba(14, 18, 20, 0.14));
    --handle-line-active: var(--active-op-color, #008080);
    
    /* Motion alignment */
    --handle-duration: var(--duration-fast, 140ms);
    --handle-ease:     var(--ease-mechanical, ease);
}

/* ==========================================================================
   2. Base State & Anchors
   ========================================================================== */

:where(
    [data-cognitive-handle],
    [data-handle-corner],
    [data-dimension],
    [data-nested-container],
    [data-nested-bracket],
    [data-abstraction-level],
    [data-relation-pair],
    [data-phase-dimension],
    [data-scale-handle],
    [data-cognitive-anchor],
    [data-dimensional-link],
    [data-foldable]
) {
    /* Debug / inspection */
    --spw-debug-layer-owner: "handles";
    --spw-debug-layer-color: #1d57a3;

    position: relative;
}

:where(
    [data-cognitive-handle],
    [data-scale-handle],
    [data-foldable],
    [data-cognitive-anchor]
) {
    cursor: pointer;
}

/* Universal Focus */
:where(
    [data-cognitive-handle]:focus-visible,
    [data-scale-handle]:focus-visible,
    [data-foldable]:focus-visible,
    [data-cognitive-anchor]:focus-visible,
    [data-dimensional-link]:focus-visible
) {
    outline: 2px solid var(--handle-line-active);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   3. Primary Handle: Left Crease
   ========================================================================== */

:where([data-cognitive-handle]) {
    transition:
        border-color var(--handle-duration) var(--handle-ease),
        background-color var(--handle-duration) var(--handle-ease);
}

:where([data-cognitive-handle])::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    border-left: 2px solid var(--handle-line);
    opacity: 0.58;
    pointer-events: none;
    transition:
        border-color var(--handle-duration) var(--handle-ease),
        opacity var(--handle-duration) var(--handle-ease),
        width var(--handle-duration) var(--handle-ease);
}

:where([data-cognitive-handle]:hover::before, [data-cognitive-handle]:focus-within::before) {
    width: 5px;
    border-color: var(--handle-line-active);
    opacity: 0.92;
}

:where([data-cognitive-handle][data-depth="0"])::before { height: 22%; }
:where([data-cognitive-handle][data-depth="1"])::before { height: 42%; }
:where([data-cognitive-handle][data-depth="2"])::before { height: 62%; }
:where([data-cognitive-handle][data-depth="3"])::before { height: 82%; }
:where([data-cognitive-handle][data-depth="4"])::before { height: 100%; }

/* ==========================================================================
   4. Corner Braces
   ========================================================================== */

:where([data-handle-corner])::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border: 2px solid transparent;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--handle-duration) var(--handle-ease),
        border-color var(--handle-duration) var(--handle-ease);
}

:where([data-handle-corner="tl"])::after {
    top: 0;
    left: 0;
    border-top-color: var(--handle-entry);
    border-left-color: var(--handle-entry);
}

:where([data-handle-corner="tr"])::after {
    top: 0;
    right: 0;
    border-top-color: var(--handle-concept);
    border-right-color: var(--handle-concept);
}

:where([data-handle-corner="bl"])::after {
    bottom: 0;
    left: 0;
    border-bottom-color: var(--handle-instance);
    border-left-color: var(--handle-instance);
}

:where([data-handle-corner="br"])::after {
    right: 0;
    bottom: 0;
    border-right-color: var(--handle-relation);
    border-bottom-color: var(--handle-relation);
}

:where([data-handle-corner]:hover::after, [data-handle-corner]:focus-within::after) {
    opacity: 0.82;
}

/* ==========================================================================
   5. Dimensional Creases & Nesting
   ========================================================================== */

:where([data-dimension])::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--depth-indicator-width, 2px);
    border-left: var(--depth-indicator-width, 2px) double var(--handle-line);
    opacity: 0;
    pointer-events: none;
    transition:
        border-color var(--handle-duration) var(--handle-ease),
        opacity var(--handle-duration) var(--handle-ease);
}

:where([data-dimension]:hover::before, [data-dimension]:focus-within::before) {
    border-color: var(--handle-line-active);
    opacity: 1;
}

:where([data-dimension="0"])::before { --depth-indicator-width: 1px; }
:where([data-dimension="1"])::before { --depth-indicator-width: 2px; }
:where([data-dimension="2"])::before { --depth-indicator-width: 3px; }
:where([data-dimension="3"])::before { --depth-indicator-width: 4px; }

:where([data-nested-container]) {
    padding-left: calc(var(--nesting-level, 0) * 14px);
    border-left: 1px solid transparent;
    transition:
        border-color var(--handle-duration) var(--handle-ease),
        padding-left var(--handle-duration) var(--handle-ease);
}

:where([data-nested-container][data-nesting-level="1"]) { border-left-color: color-mix(in srgb, var(--active-op-color, #008080) 22%, transparent); }
:where([data-nested-container][data-nesting-level="2"]) { border-left-color: color-mix(in srgb, var(--active-op-color, #008080) 30%, transparent); }
:where([data-nested-container][data-nesting-level="3"]) { border-left-color: color-mix(in srgb, var(--active-op-color, #008080) 38%, transparent); }

:where([data-nested-container]:hover, [data-nested-container]:focus-within) {
    border-left-color: var(--handle-line-active);
}

:where([data-nested-bracket]) {
    display: inline-block;
}

:where([data-nested-bracket])::before,
:where([data-nested-bracket])::after {
    position: absolute;
    color: var(--handle-concept);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-nested-bracket])::before { content: '{'; left: -1em; }
:where([data-nested-bracket])::after  { content: '}'; right: -1em; }

:where([data-nested-bracket]:hover::before, [data-nested-bracket]:hover::after,
       [data-nested-bracket]:focus-within::before, [data-nested-bracket]:focus-within::after) {
    opacity: 0.66;
}

/* ==========================================================================
   6. Abstraction Labels
   ========================================================================== */

:where([data-abstraction-level])::after {
    content: attr(data-abstraction-label);
    position: absolute;
    top: -1.5em;
    right: 0;
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-size: var(--text-size-xs, 0.75rem);
    font-weight: 600;
    opacity: 0;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-abstraction-level]:hover::after, [data-abstraction-level]:focus-within::after) {
    opacity: 1;
}

:where([data-abstraction-level="entry"])::after    { color: var(--handle-entry); }
:where([data-abstraction-level="concept"])::after  { color: var(--handle-concept); }
:where([data-abstraction-level="instance"])::after { color: var(--handle-instance); }
:where([data-abstraction-level="relation"])::after { color: var(--handle-relation); }

/* ==========================================================================
   7. Relation & Phase
   ========================================================================== */

:where([data-relation-pair][data-paired="true"]) {
    border-radius: var(--shape-component, 6px);
    background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.05));
    transition: outline-color var(--handle-duration) var(--handle-ease);
}

:where([data-relation-pair][data-paired="true"]:hover, [data-relation-pair][data-paired="true"]:focus-within) {
    outline: 1px solid var(--handle-line-active);
    outline-offset: 2px;
}

:where([data-relation-pair])::before {
    content: '&';
    position: absolute;
    top: 50%;
    left: -1.1em;
    color: var(--handle-relation);
    font-weight: 700;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-relation-pair]:hover::before, [data-relation-pair]:focus-within::before) {
    opacity: 0.72;
}

:where([data-relation-line]) {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    stroke: var(--handle-relation);
    stroke-width: var(--line-thick, 2px);
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-relation-pair]:hover ~ [data-relation-line], [data-relation-pair]:focus-within ~ [data-relation-line]) {
    opacity: 0.42;
}

:where([data-phase-dimension])::before {
    content: attr(data-phase);
    position: absolute;
    top: 50%;
    right: -1rem;
    color: var(--handle-phase);
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.72rem);
    opacity: 0;
    transform: translate(100%, -50%);
    white-space: nowrap;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-phase-dimension]:hover::before, [data-phase-dimension]:focus-within::before) {
    opacity: 0.8;
}

:where([data-phase="initiation"])::before     { color: var(--phase-initiation); }
:where([data-phase="resistance"])::before     { color: var(--phase-resistance); }
:where([data-phase="transformation"])::before { color: var(--phase-transformation); }
:where([data-phase="expression"])::before     { color: var(--phase-expression); }
:where([data-phase="return"])::before         { color: var(--phase-return); }

/* ==========================================================================
   8. Scale, Anchors, Portals, Folds
   ========================================================================== */

:where([data-scale-handle])::after {
    content: '#';
    position: absolute;
    top: 50%;
    right: -1em;
    color: var(--handle-line-active);
    font-weight: 700;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-scale-handle]:hover::after, [data-scale-handle]:focus-visible::after) {
    opacity: 0.75;
}

:where([data-dimensional-breadcrumb]) {
    display: flex;
    gap: var(--space-xs, 0.5rem);
    align-items: center;
    margin-bottom: var(--space-md, 1rem);
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-size: var(--text-size-sm, 0.85rem);
}

:where([data-dimensional-breadcrumb] > span) {
    position: relative;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--handle-line);
    border-radius: var(--shape-component, 6px);
    background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.06));
    transition: 
        border-color var(--handle-duration) var(--handle-ease),
        color var(--handle-duration) var(--handle-ease);
}

:where([data-dimensional-breadcrumb] > span:hover, [data-dimensional-breadcrumb] > span:focus-visible) {
    border-color: var(--handle-line-active);
    color: var(--ink);
}

:where([data-cognitive-anchor])::before {
    content: '#{';
    position: absolute;
    left: -1.55em;
    color: var(--handle-relation);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-cognitive-anchor])::after {
    content: '}';
    color: var(--handle-relation);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-cognitive-anchor]:hover::before, [data-cognitive-anchor]:hover::after,
       [data-cognitive-anchor]:focus-visible::before, [data-cognitive-anchor]:focus-visible::after) {
    opacity: 0.8;
}

:where([data-dimensional-link])::after {
    content: ' ~{}';
    color: var(--handle-concept);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-dimensional-link]:hover::after, [data-dimensional-link]:focus-visible::after) {
    opacity: 0.72;
}

:where([data-foldable])::before {
    content: '{';
    position: absolute;
    top: 50%;
    left: -0.75rem;
    color: var(--handle-line-active);
    font-weight: 700;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-foldable][data-folded="true"])::before {
    content: '}';
}

:where([data-foldable]:hover::before, [data-foldable]:focus-visible::before) {
    opacity: 0.85;
}

/* ==========================================================================
   9. Responsive & Accessibility Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    :where([data-cognitive-handle])::before {
        opacity: 0.72;
        width: 4px;
    }

    :where([data-handle-corner])::after {
        opacity: 0.48;
    }

    :where([data-dimensional-breadcrumb]) {
        gap: var(--space-2xs, 0.25rem);
        font-size: var(--text-size-xs, 0.75rem);
    }

    :where([data-dimensional-breadcrumb] > span) {
        padding: 0.2rem 0.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(
        [data-cognitive-handle],
        [data-cognitive-handle]::before,
        [data-handle-corner]::after,
        [data-nested-container],
        [data-nested-bracket]::before,
        [data-nested-bracket]::after,
        [data-abstraction-level]::after,
        [data-relation-pair],
        [data-relation-pair]::before,
        [data-relation-line],
        [data-phase-dimension]::before,
        [data-scale-handle]::after,
        [data-cognitive-anchor]::before,
        [data-cognitive-anchor]::after,
        [data-dimensional-link]::after,
        [data-foldable]::before
    ) {
        transition: none !important;
        animation: none !important;
    }
}

}

/* /public/css/handles/operators/tokens.css */
@layer handles {
/* ==========================================================================
   operators/tokens.css — the tuning table of the handle orchestra
   --------------------------------------------------------------------------
   Reads as: every color, duration, and radius a handle may speak in; a glossary, read like a menu
   Was: handles/operators.css §1 (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: aria-current, aria-expanded, data-spw-active, data-spw-artifact, data-spw-attention, data-spw-breadcrumb-state, data-spw-dimensional-breadcrumbs, data-spw-feature, data-spw-measure, data-spw-measure-kind, data-spw-menu, data-spw-menu-mode, data-spw-navigator, data-spw-operator
   Genome — custom properties defined: 47; intent hooks consumed: none
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   operators.css
   --------------------------------------------------------------------------
   Purpose
   - Interactive handles, inline affordances, compact control seams, and
     literate gesture states.
   - This layer owns "how something can be grasped", not full material,
     phase, or pretext layout systems.

   Mental model
   - Tokens can be grasped as text, pills, seams, or room-signs.
   - Handles should expose semantic allocation without overwhelming prose.
   - A good handle explains what can be touched, how it will respond, and
     which operator / substrate / stance / role it belongs to.

   Does own
   - sigils, operator chips, syntax tokens, inline delimiters, spec pills
   - selection / activation / latch / bookmark / allocation states
   - compact breadcrumbs and frame metrics seams
   - room-aware swap hints and memo surfaces
   - subtle gesture signaling for inline and card-adjacent handles
   - semantic seams for operator, substrate, role, stance, and flow hints
   ========================================================================== */

/* ==========================================================================
   1. Handle tokens
   ========================================================================== */

/* Surface map / frame navigator (spw-nav) */
.spw-nav {
  --spw-nav-accent: var(--op-frame-color, var(--teal, #008080));
  position: fixed;
  inset: 50% max(0.65rem, env(safe-area-inset-right)) auto auto;
  transform: translateY(-50%);
  display: grid;
  justify-items: end;
  gap: 0.42rem;
  inline-size: min(22rem, calc(100vw - 1.2rem));
  max-inline-size: calc(100vw - 1.2rem);
  pointer-events: none;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.78rem;
}

.spw-nav > * {
  pointer-events: auto;
}

.spw-nav-strip {
  display: grid;
  justify-items: end;
}

.spw-nav-trigger {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0.28rem 0.42rem;
  min-height: var(--touch-target-compact, 2.15rem);
  padding: 0.28rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--spw-nav-accent) 28%, var(--line, rgba(14, 18, 20, 0.14)) 72%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 58%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 94%, var(--spw-nav-accent) 6%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 8px 20px color-mix(in srgb, var(--spw-nav-accent) 10%, rgba(0, 0, 0, 0.08));
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font: inherit;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.spw-nav-trigger:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 44%, transparent);
  outline: none;
  transform: translateX(-2px);
}

.spw-nav.is-open .spw-nav-trigger,
.spw-nav-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 52%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 52%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.96)) 90%, var(--spw-nav-accent) 10%);
}

.spw-nav-strip-label {
  color: color-mix(in srgb, var(--spw-nav-accent) 82%, var(--ink));
  font-weight: 700;
  letter-spacing: 0.03em;
}

.spw-nav-strip-sublabel {
  color: var(--ink-soft, rgba(14, 18, 20, 0.64));
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-nav-panel {
  display: grid;
  gap: 0.42rem;
  inline-size: min(22rem, calc(100vw - 1.2rem));
  max-block-size: min(34rem, calc(100dvh - 2rem - var(--spw-floating-menu-clearance, 0px)));
  padding: 0.62rem 0.68rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--spw-nav-accent) 24%, var(--line, rgba(14, 18, 20, 0.14)) 76%);
  border-radius: var(--shape-medium, 0.85rem);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--spw-nav-accent) 8%, transparent), transparent 56%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.97)) 96%, transparent);
  box-shadow:
    0 1rem 2.4rem rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.45rem) scale(0.985);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.spw-nav.is-open .spw-nav-panel:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}

.spw-nav-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.spw-nav-title {
  min-width: 0;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-weight: 600;
}

.spw-nav-title [data-spw-operator] {
  color: var(--spw-nav-accent);
}

.spw-nav-counter {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.spw-nav-close {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 78%, transparent);
  border-radius: var(--shape-element, 0.28rem);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.spw-nav-close:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 30%, transparent);
  color: var(--ink);
  outline: none;
}

.spw-nav-search-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 82%, transparent);
  border-radius: var(--shape-control, 0.78rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent);
}

.spw-nav-search-op {
  color: var(--op-probe-color, #4a2180);
  font-weight: 700;
}

.spw-nav-search {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
}

.spw-nav-list {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.spw-nav-section-label {
  margin-block: 0.18rem 0.06rem;
  padding-inline: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.spw-nav-item-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.38rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.34rem 0.46rem;
  border: 1px solid transparent;
  border-radius: var(--shape-control, 0.78rem);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    transform 120ms ease;
}

.spw-nav-item-btn:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 20%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--spw-nav-accent) 8%);
  outline: none;
  transform: translateX(-1px);
}

.spw-nav-item-btn.is-active,
.spw-nav-item-btn[aria-current="true"] {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 34%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, var(--spw-nav-accent) 12%);
}

.spw-nav-op-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.1rem 0.28rem;
  border: 1px solid color-mix(in srgb, var(--spw-operator-color, var(--spw-nav-accent)) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--spw-operator-color, var(--spw-nav-accent)) 10%, transparent);
  color: var(--spw-operator-color, var(--spw-nav-accent));
  font-size: 0.66rem;
  font-weight: 700;
}

.spw-nav-item-body {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.spw-nav-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.spw-nav-item-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 0.64rem;
}

.spw-nav-empty {
  padding: 0.5rem 0.35rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.spw-nav-spells {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.42rem;
  align-items: center;
  padding-top: 0.12rem;
  border-top: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 72%, transparent);
  color: var(--ink-soft);
  font-size: 0.62rem;
}

.spw-nav-spells .spw-spell {
  padding: 0.1rem 0.32rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 78%, transparent);
  border-radius: 0.28rem;
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  color: var(--ink);
  font-weight: 600;
}

html[data-spw-navigator="hidden"] .spw-nav {
  display: none !important;
}

html[data-spw-navigator="quiet"] .spw-nav:not(.is-open) .spw-nav-trigger {
  opacity: 0.58;
}

html[data-spw-navigator="quiet"] .spw-nav:not(.is-open):is(:hover, :focus-within) .spw-nav-trigger,
html[data-spw-navigator="full"] .spw-nav-trigger {
  opacity: 1;
}

html[data-spw-spell-path-state="open"] .spw-spell-path[data-spw-breadcrumb-state="open"] {
  border-color: color-mix(in srgb, var(--teal, #008080) 22%, var(--line, rgba(14, 18, 20, 0.14)) 78%);
}

html[data-spw-dimensional-breadcrumbs="on"] .spw-spell-path .spw-spell-meaning {
  display: block;
}

@media (max-width: 720px) {
  .spw-nav {
    inset: auto max(0.55rem, env(safe-area-inset-right)) calc(max(0.8rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px) + 3.2rem) auto;
    transform: none;
    inline-size: min(20rem, calc(100vw - 1rem));
  }

  .spw-nav-panel {
    max-block-size: min(28rem, calc(100dvh - 6.5rem - var(--spw-floating-menu-clearance, 0px)));
  }

  html[data-spw-dimensional-breadcrumbs="on"] .spw-spell-path__guide,
  html[data-spw-dimensional-breadcrumbs="on"] .spw-spell-meaning {
    display: block;
  }
}

.spw-console {
  --spw-console-ink: #f3efe6;
  --spw-console-ink-muted: rgba(243, 239, 230, 0.72);
  --spw-console-token-bg: rgba(8, 18, 20, 0.74);
  --spw-console-token-line: rgba(126, 210, 204, 0.42);
  --spw-console-offset-block: max(0.9rem, env(safe-area-inset-bottom));
  --spw-console-offset-inline: max(0.9rem, env(safe-area-inset-left));
  --spw-floating-menu-clearance: 0px;
  --handle-ink: var(--spw-console-ink);
  --handle-bg: var(--spw-console-token-bg);
  --handle-line: var(--spw-console-token-line);
  /* Resonance with state satchel: use floating chrome vars for shared ephemeral ergonomics (pad, gap, material), fixed inset consistent with satchel bottom-right, grid for layout predictability. Improves visible console chrome + overall ephemeral arch. */
  position: fixed;
  inset: auto auto calc(var(--spw-console-offset-block) + var(--spw-floating-menu-clearance, 0px)) var(--spw-console-offset-inline);
  display: grid;
  inline-size: min(31rem, calc(100vw - 1.8rem));
  max-block-size: min(29rem, calc(100dvh - 4.25rem));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--op-probe-color, #4a2180) 32%, transparent);
  border-radius: var(--shape-component, 0.42rem);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-code, #151515) 92%, var(--op-frame-color, #008080) 8%),
      color-mix(in srgb, var(--surface-code, #151515) 88%, var(--op-probe-color, #4a2180) 12%)
    );
  box-shadow:
    0 1rem 2.4rem color-mix(in srgb, var(--shadow-color, #111111) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
  color: var(--spw-console-ink);
  contain: layout paint style;
  /* Ephemeral chrome shared */
  padding: var(--chrome-pad, 0.45rem);
  gap: var(--chrome-gap, 0.35rem);
  font-size: var(--chrome-font, 0.82rem);
}

.spw-console.spw-console {
  position: fixed;
  inset: auto auto calc(var(--spw-console-offset-block) + var(--spw-floating-menu-clearance, 0px)) var(--spw-console-offset-inline);
}

.spw-console.is-idle:not(:hover):not(:focus-within) {
  opacity: var(--console-idle-opacity, 0.76);
}

.spw-console-collapsed-bar,
.spw-console-body {
  min-inline-size: 0;
}

.spw-console-collapsed-bar {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.6rem;
  /* Collapsed ergonomics resonate satchel launch: baseline/center, compact pill content for utility-like quick feedback/learnability.
     The token is the "sigil/prompt", chevron is the expand affordance (tap target). */
}

.spw-console.is-collapsed .spw-console-collapsed-bar .spw-console-action-token,
.spw-console.is-collapsed .spw-console-collapsed-bar .frame-sigil {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
}

.spw-console.is-collapsed .spw-console-expand-btn {
  min-width: 1.6rem;
  min-height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.7em;
  line-height: 1;
  opacity: 0.85;
}

.spw-console.is-collapsed {
  inline-size: min(18rem, calc(100vw - 1.2rem));
  min-block-size: 2.35rem; /* match satchel launch height for resonance */
  border-radius: 999px; /* full pill like satchel launch */
  box-shadow: 0 8px 32px color-mix(in srgb, var(--shadow-color, #111) 22%, transparent);
  /* Ephemeral chrome resonance + ergonomics: pill shape, height, shadow match satchel launch for family feel;
     layout of the bar inside is compact prompt + action chevron, baseline aligned, good tap target for expand.
     Position lifted slightly so it doesn't bury footer nav text; uses floating safe inset. */
  inset-inline-start: max(0.75rem, env(safe-area-inset-left));
  inset-inline-end: auto;
  bottom: calc(var(--spw-floating-slot-console, var(--spw-floating-bottom-rail, max(0.6rem, env(safe-area-inset-bottom)))) + var(--spw-floating-menu-clearance, 0px));
}

@media (max-width: 720px) {
  .spw-console.is-collapsed {
    min-block-size: var(--touch-target-compact, 2.25rem);
    padding: 0;
    border-color: color-mix(in srgb, var(--op-probe-color, #4a2180) 22%, rgba(255, 255, 255, 0.18));
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 64%),
      color-mix(in srgb, var(--surface-code, #151515) 94%, var(--op-frame-color, #008080) 6%);
    box-shadow:
      0 0.45rem 1.1rem color-mix(in srgb, var(--shadow-color, #111111) 24%, transparent),
      inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
  }

  .spw-console.is-idle:not(:hover):not(:focus-within) {
    opacity: var(--spw-floating-quiet-opacity, 0.74);
  }

  :root:has([data-spw-state-inspector-root]) .spw-console.is-collapsed {
    inline-size: min(9.4rem, calc(50vw - 0.9rem));
    max-inline-size: min(9.4rem, calc(50vw - 0.9rem));
  }

  .spw-console.is-collapsed .spw-console-collapsed-bar {
    min-block-size: var(--touch-target-compact, 2.25rem);
    padding: 0.24rem 0.5rem;
    gap: 0.28rem;
  }

  .spw-console.is-collapsed .spw-console-collapsed-bar .spw-console-action-token,
  .spw-console.is-collapsed .spw-console-collapsed-bar .frame-sigil {
    max-inline-size: 7.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    letter-spacing: 0;
  }

  .spw-console.is-collapsed .spw-console-expand-btn {
    min-width: 1.25rem;
    min-height: 1.25rem;
    font-size: 0.62em;
  }
}

:root:has([data-spw-state-inspector-root][data-spw-state-inspector="open"]) {
  --spw-console-satchel-clearance: 0px;
}

@media (min-width: 721px) {
  :root:has([data-spw-state-inspector-root][data-spw-state-inspector="open"]) .spw-console.is-collapsed {
    bottom: calc(max(0.6rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px));
  }
}

.spw-console.is-collapsed .spw-console-collapsed-bar {
  display: grid;
  align-items: center;
  padding: 0.35rem 0.65rem;
  gap: 0.5rem;
}

.spw-console.is-collapsed .spw-console-body {
  display: none;
}

@media (max-width: 720px) {
  .spw-console.is-collapsed .spw-console-collapsed-bar {
    min-block-size: var(--touch-target-compact, 2.25rem);
    padding: 0.24rem 0.5rem;
    gap: 0.28rem;
  }

  .spw-console.is-collapsed .spw-console-collapsed-bar .spw-console-action-token,
  .spw-console.is-collapsed .spw-console-collapsed-bar .frame-sigil {
    max-inline-size: 7.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    letter-spacing: 0;
  }

  .spw-console.is-collapsed .spw-console-expand-btn {
    min-width: 1.25rem;
    min-height: 1.25rem;
    font-size: 0.62em;
  }
}

.spw-console-body {
  display: grid;
  gap: 0.32rem;
  min-block-size: 0;
  max-block-size: inherit;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--chrome-pad, 0.45rem);
  /* Layout resonance with satchel panel: grid for sections (header, diagnostics, history like actions/toggles), better learnability spacing. */
}

.spw-console-line {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: start;
  gap: 0.42rem;
  min-inline-size: 0;
}

.spw-console-line:not(.spw-console-header-line) {
  grid-template-columns: max-content minmax(0, 1fr);
}

.spw-console-copy,
.spw-console-history-copy,
.spw-console-history-meta {
  color: var(--spw-console-ink);
  min-inline-size: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.spw-console-diagnostics-line {
  padding-block: 0.1rem;
  border-block: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.spw-console-mode-buttons,
.spw-console-spells {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-inline-size: 0;
}

.spw-console-diagnostics-copy,
.spw-console-history-meta {
  color: var(--spw-console-ink-muted);
  font-size: 0.78rem;
}

.spw-console .frame-sigil,
.spw-console-history-token,
.spw-console-token,
.spw-console-action-token,
.spw-console-diagnostics-token {
  display: inline-flex;
  inline-size: auto;
  min-inline-size: max-content;
  max-inline-size: 100%;
  flex: 0 0 auto;
  justify-content: flex-start;
  color: var(--spw-console-ink);
  font-size: 0.78rem;
  white-space: nowrap;
}

.spw-console-history {
  display: grid;
  gap: 0.26rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spw-console-history-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.36rem;
  min-inline-size: 0;
  opacity: calc(1 - (var(--history-age, 0) * 0.11));
}

.spw-console-history-meta {
  grid-column: 2;
}

@media (max-width: 720px) {
  :where(html:has(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"]),
         html:has(body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"])) .spw-console {
    --spw-floating-menu-clearance: 4.25rem;
  }

  :where(html:has(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"]),
         html:has(body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"])) .spw-console.is-collapsed {
    opacity: 0.82;
  }

  .spw-console:not(.is-collapsed) {
    inset-inline: max(0.7rem, env(safe-area-inset-left)) max(0.7rem, env(safe-area-inset-right));
    inset-block-end: calc(max(0.7rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px));
    inline-size: auto;
    max-block-size: min(24rem, calc(100dvh - 4.6rem));
  }

  .spw-console-line:not(.spw-console-header-line),
  .spw-console-history-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .spw-console-history-meta {
    grid-column: 1;
  }

  .spw-console .frame-sigil,
  .spw-console-history-token,
  .spw-console-token,
  .spw-console-action-token,
  .spw-console-diagnostics-token {
    white-space: normal;
  }
}

@media (max-height: 620px) {
  .spw-console:not(.is-collapsed) {
    max-block-size: calc(100dvh - 1.4rem);
  }
}

.spw-console-expand-btn,
.spw-console-collapse-btn {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.9rem;
  min-block-size: 1.9rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--shape-element, 0.28rem);
  background: color-mix(in srgb, var(--surface-strong, #ffffff) 10%, transparent);
  color: inherit;
  cursor: pointer;
}

/* Handles sit above content but below site-level overlays. */
.mode-switch,
.demo-controls,
.spw-spell-path,
.frame-metrics-bar,
.frame-topline,
.frame-heading {
  position: relative;
  z-index: 120;
}

:root {
  --handle-min-height: max(2.2rem, var(--touch-target-min, 2.2rem));
  --handle-min-height-compact: 1.64rem;
  --handle-baseline-offset: 0.08em;

  --handle-radius: var(--shape-component, 0.42rem);
  --handle-radius-tight: var(--shape-element, 0.28rem);
  --handle-radius-pill: 999px;

  --handle-pad-y: 0.2rem;
  --handle-pad-x: 0.54rem;
  --handle-pad-inline-inline: 0.24rem;
  --handle-pad-block-inline: 0.04rem;
  --handle-gap: 0.38rem;
  --handle-gap-tight: 0.22rem;

  --handle-bg: var(--surface-strong, rgba(255, 255, 255, 0.82));
  --handle-bg-soft: color-mix(in srgb, var(--handle-bg) 82%, transparent);
  --handle-bg-active:
    color-mix(in srgb, var(--active-op-color, var(--teal)) 6%, var(--handle-bg));
  --handle-bg-selected:
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 90%, var(--active-op-color, var(--teal)) 10%);

  --handle-ink: var(--active-op-color, var(--teal));
  --handle-ink-soft: var(--ink-soft, rgba(14, 18, 20, 0.62));
  --handle-ink-quiet: color-mix(in srgb, var(--handle-ink-soft) 78%, transparent);

  --handle-line:
    color-mix(in srgb, var(--active-op-color, var(--teal)) 62%, transparent);
  --handle-line-soft:
    color-mix(in srgb, var(--active-op-color, var(--teal)) 26%, transparent);
  --handle-line-quiet:
    color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 88%, transparent);

  --handle-shadow-rest: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.06));
  --handle-shadow-focus:
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent),
    0 3px 10px rgba(0, 0, 0, 0.025);
  --handle-shadow-latched:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 22%, transparent);
  --handle-shadow-guided:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-substrate-color, var(--teal)) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--spw-substrate-color, var(--teal)) 12%, transparent);

  --handle-duration-fast: var(--duration-fast, 120ms);
  --handle-duration-base: var(--duration-base, 180ms);
  --handle-duration-deliberate: var(--duration-deliberate, 280ms);

  --handle-ease: var(--ease-mechanical, ease);
  --handle-settle-ease: var(--brace-settle-ease, cubic-bezier(0.22, 0, 0.15, 1));

  --handle-underline-thickness: 1.5px;
  --handle-underline-offset: 0.16em;

  --handle-roomy-hint-threshold: 44rem;
  --handle-meta-font: var(--site-mono-font, "JetBrains Mono", monospace);
}

:where(.spec-strip, .frame-operators, .spw-component-meta, .spw-component-guides) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--handle-gap);
  align-items: baseline;
  min-width: 0;
}

:where([data-spw-operator], .operator-chip, .frame-sigil, .frame-card-sigil) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "handles";
  --spw-debug-layer-color: #1d57a3;
}

/* Measure kind support (aligns with .spw operator-site-projection for %)
   Subjective measures (practitioner judgment, felt resonance) get softer treatment
   and can be visually distinguished from objective instrumented values.
   This supports both cognitive and computational communication of % measures. */
[data-spw-measure-kind="subjective"] {
  --measure-tint: color-mix(in srgb, var(--op-probe-color, #6a3fb8) 18%, currentColor);
  font-style: italic;
  border-style: dashed;
  opacity: 0.92;
}
[data-spw-measure-kind="objective"] {
  --measure-tint: color-mix(in srgb, var(--op-value-color, currentColor) 12%, currentColor);
  font-style: normal;
}
[data-spw-measure-kind] {
  box-sizing: border-box;
  padding-inline: calc(var(--handle-pad-x) * 0.8);
  border: 1px solid transparent;
  border-color: var(--measure-tint, currentColor);
}

/* Responsive tightening for narrow viewports and tall aspect ratios (mobile portrait, etc.)
   Prevents measure elements from causing wrapping or overflow inside frames/labs while preserving the subjective/objective distinction. */
@media (max-width: 40rem) {
  [data-spw-measure-kind],
  .status[data-spw-measure-kind],
  .math-diagram-status[data-spw-measure-kind] {
    font-size: 0.9em;
    padding-inline: calc(var(--handle-pad-x) * 0.6);
    line-height: 1.35;
  }

  .math-interactive-lab [data-spw-measure-kind] {
    max-inline-size: 100%;
  }
}

/* Extend to general status and artifact elements for curriculum / labs coherence */
.status[data-spw-measure-kind],
[data-spw-artifact] [data-spw-measure-kind],
.proof-textarea[data-spw-measure-kind],
.math-diagram-status[data-spw-measure-kind],
[data-spw-proof] [data-spw-measure] {
  font-family: var(--font-mono, monospace);
  border: 1px dashed var(--measure-tint, currentColor);
}

/* Measurement phases + interactivity + wrapping (component layout + interactivity audit)
   - Stronger focus-visible and active coordination when measures live inside frames
     that are active, attention-focused, or under developmental/author phases.
   - Preserves subjective (dashed/italic) vs objective distinction while giving
     tactile "graspable" feedback — supports both manuscript layering and
     fidget-toy style tuning of measurement surfaces.
   - Scoped wrapping safeguard for long subjective reflections or objective
     status text inside frames to reduce awkward breaks during phase transitions
     (authorMode/climate changes, frame activation, motif application).
   - Ties into expressive layout tropes: these states are now more observable
     and less likely to produce surprising layout shifts. */
:where(.site-frame, [data-spw-feature*="measure"], .math-interactive-lab)
  [data-spw-measure-kind]:is(:focus-visible, :focus-within) {
  outline: 2px solid color-mix(in srgb, var(--measure-tint, var(--op-probe-color)) 45%, transparent);
  outline-offset: 2px;
  border-color: var(--measure-tint, currentColor);
}

:where(.site-frame[data-spw-active="true"], .site-frame[data-spw-attention="focused"])
  [data-spw-measure-kind] {
  /* Gentle common-fate lift during frame phases without causing extra wrap */
  transform: translateY(-0.5px);
  transition: transform var(--duration-fast, 140ms) var(--ease-settle, ease);
}

:where(.site-frame, .proof-capture, .boundary-test-form)
  [data-spw-measure-kind="subjective"] {
  /* Extra wrapping protection for long practitioner reflections in manuscript contexts */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

@media (max-width: 48rem) {
  :where(.site-frame, .math-interactive-lab)
    [data-spw-measure-kind] {
    /* Tighter intermediate-width wrapping guard for measurement phases */
    max-inline-size: calc(100% - 0.5rem);
    line-height: 1.38;
  }
}


}

/* /public/css/handles/operators/primitive.css */
@layer handles {
/* ==========================================================================
   operators/primitive.css — the shared handle body
   --------------------------------------------------------------------------
   Reads as: what every handle is before it becomes anything: box, seat, seam, and debug pulse
   Was: handles/operators.css §2–3 (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: aria-current, aria-pressed, data-spw-charge-key, data-spw-handle, data-spw-inline-form, data-spw-operator, data-spw-projection, data-spw-selection, data-spw-show-semantic-metadata, data-spw-state-inspector, data-spw-surface
   Genome — custom properties defined: 3; intent hooks consumed: none
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   2. Shared handle primitive
   --------------------------------------------------------------------------
   The handle primitive is intentionally broad. Specific nouns bias from here.
   Raw semantic attributes only get handle treatment on inline-capable tags.
   ========================================================================== */

/* Handle gateway: add only things visitors can grasp or scan. */
:where(
  .operator-chip,
  .syntax-token,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .resonance-sigil,
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-handle="true"],
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
) {
  --handle-arrival-lift: 0px;
  --handle-arrival-opacity: 1;
  --interaction-excitement: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  min-width: 0;
  max-width: 100%;
  min-height: var(--handle-min-height);
  padding: var(--handle-pad-y) var(--handle-pad-x);
  padding-top: calc(var(--handle-pad-y) + var(--handle-baseline-offset));
  box-sizing: border-box;
  border: 1.25px solid var(--handle-line);
  border-radius: var(--handle-radius);
  background: var(--handle-bg);
  color: var(--handle-ink);
  text-decoration: none;
  text-shadow: none;
  opacity: var(--handle-arrival-opacity);
  box-shadow:
      var(--handle-shadow-rest),
      0 0 calc(var(--interaction-excitement) * 12px) color-mix(in srgb, currentColor calc(var(--interaction-excitement) * 40%), transparent);
  transform: translateY(calc(var(--handle-arrival-lift) + (var(--interaction-excitement) * -2px)));
  cursor: pointer;
  contain: paint style;
  transition:
    color var(--handle-duration-fast) var(--handle-ease),
    background-color var(--handle-duration-fast) var(--handle-ease),
    border-color var(--handle-duration-base) var(--handle-ease),
    box-shadow var(--handle-duration-base) var(--handle-settle-ease),
    transform var(--handle-duration-fast) var(--handle-settle-ease),
    opacity var(--handle-duration-fast) var(--handle-ease),
    filter var(--handle-duration-base) var(--handle-settle-ease);
}

:where(
  .operator-chip,
  .syntax-token,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .resonance-sigil,
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-handle="true"]
):is(:hover, :focus-visible) {
  --interaction-excitement: 0.82;
}

@keyframes spw-operator-breath {
  0%, 100% {
    box-shadow:
      var(--handle-shadow-rest),
      0 0 8px color-mix(in srgb, currentColor 20%, transparent);
  }
  50% {
    box-shadow:
      var(--handle-shadow-rest),
      0 0 16px color-mix(in srgb, currentColor 40%, transparent);
  }
}

:where(
  .operator-chip,
  .syntax-token,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .resonance-sigil,
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-handle="true"]
):is([data-spw-selection="active"], [data-spw-selection="selected"], [aria-current="page"], [aria-pressed="true"]) {
  --interaction-excitement: 1;
  animation: spw-operator-breath 2s ease-in-out infinite;
}

@keyframes spw-operator-ripple {
  0% { box-shadow: 0 0 0 0px color-mix(in srgb, currentColor 40%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

:where(
  .operator-chip,
  .syntax-token,
  .frame-sigil,
  .frame-card-sigil
):active {
  --interaction-excitement: 0.42;
  transform: translateY(var(--spw-control-press-depth, 1px)) scale(var(--spw-micro-press-scale, 0.998));
  transition:
    transform var(--spw-interaction-acknowledge, var(--touch-acknowledge, 90ms) var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1))),
    box-shadow var(--spw-interaction-acknowledge, var(--touch-acknowledge, 90ms) var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1)));
  animation: spw-operator-ripple 0.4s ease-out;
}

/* Inline handles should read like annotated language before they read as pills. */
/* The :not() list keeps full controls from flattening into prose tokens. */
:where(
  .syntax-token,
  .spw-delimiter,
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):not(.operator-chip):not(.frame-sigil):not(.spec-pill):not(.spw-component-tag):not(.spw-guide-chip) {
  min-height: auto;
  padding-inline: var(--handle-pad-inline-inline);
  padding-block: var(--handle-pad-block-inline);
  border-color: transparent;
  background: transparent;
  border-radius: var(--handle-radius-tight);
  box-shadow: none;
}

/* Handles that mostly communicate metadata should stay compact. */
:where(.spw-component-tag, .spw-guide-chip, .frame-card-sigil, .resonance-sigil) {
  min-height: var(--handle-min-height-compact);
  padding-inline: 0.42rem;
  font-family: var(--handle-meta-font);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Visual refinement for .spw-component-tag (rune slip / codex treatment)
   --------------------------------------------------------------------------
   The tag is the visible face of the semantic kernel (the system inspected
   in the reference screenshot). Default remains compact metadata. When the
   kernel is projected (data-spw-projection, rpg-wednesday surface, or the
   home gateway we enhanced), the tag becomes a "codex slip" — textured,
   lifted, and resonant — so the computational labels feel like artifacts
   that belong in the overgrown library stacks.
   ========================================================================== */

:where(.spw-component-tag) {
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, var(--handle-line-soft, rgba(0, 0, 0, 0.12)) 84%);
  border-radius: var(--handle-radius-tight, 0.28rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 95%, var(--active-op-color, var(--teal)) 5%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.38);
  transition:
    background var(--handle-duration-fast, 140ms) var(--handle-ease),
    border-color var(--handle-duration-fast, 140ms) var(--handle-ease),
    box-shadow var(--handle-duration-fast, 140ms) var(--handle-ease),
    transform var(--handle-duration-fast, 140ms) var(--handle-ease);
}

/* Projection / portal fantasy variant — feels like a physical slip from the codex */
:where([data-spw-projection] .spw-component-tag),
:where(body[data-spw-surface="rpg-wednesday"] .spw-component-tag),
:where(#town-library-gateway .spw-component-tag) {
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, var(--active-op-color, var(--teal)) 10%);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 26%, var(--handle-line-soft) 74%);
  box-shadow:
    var(--projection-lift-xs, 1px) var(--projection-lift-xs, 1px) 0 color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.48);
}

:where([data-spw-projection] .spw-component-tag):hover,
:where([data-spw-projection] .spw-component-tag):focus-visible,
:where(body[data-spw-surface="rpg-wednesday"] .spw-component-tag):hover,
:where(body[data-spw-surface="rpg-wednesday"] .spw-component-tag):focus-visible,
:where(#town-library-gateway .spw-component-tag):hover,
:where(#town-library-gateway .spw-component-tag):focus-visible {
  background: color-mix(in srgb, var(--surface-strong, #fff) 86%, var(--active-op-color, var(--teal)) 14%);
  box-shadow:
    var(--projection-lift-sm, 2px) var(--projection-lift-sm, 2px) 0 color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent),
    0 0 0 calc(1px * var(--spw-resonance, 0.55)) color-mix(in srgb, var(--active-op-color, var(--teal)) 32%, transparent);
  transform: translateY(-0.5px);
}

/* Better containment for metas hosting tags in dense inspect/home contexts
   (directly addresses the long raw attribute lists visible in the reference screenshot) */
:where(.spw-component-meta) {
  max-inline-size: 100%;
}

/* Dense control rows inside custom inspector panels (e.g. the header bar with
   Light/Dark, text size, and CHOOSE WHAT pills in the read/inspect sidebar).
   Prevents over-packing, clipping at panel edges, and awkward wrapping. */
:where(.spw-state-inspector__panel, .read-inspect-panel, .kernel-inspector, [data-spw-state-inspector]) .spw-component-meta,
:where(.spw-state-inspector__panel, .read-inspect-panel, .kernel-inspector, [data-spw-state-inspector]) .frame-operators,
:where(.spw-state-inspector__panel, .read-inspect-panel, .kernel-inspector, [data-spw-state-inspector]) .spec-strip {
  flex-wrap: wrap;
  gap: var(--handle-gap, 0.38rem);
  align-items: center;
}

html[data-spw-show-semantic-metadata="on"] :where(.spw-component-meta) {
  flex-wrap: wrap;
  gap: var(--handle-gap-tight, 0.22rem);
}

/* Extra breathing room for component tags and dense control groups when inside
   inspector / read-mode panels (addresses clipping and over-packing visible in
   the custom left sidebar in the reference screenshot). */
:where(.spw-state-inspector, [data-spw-state-inspector], .read-inspect-panel, .kernel-inspector) :where(.spw-component-meta, .spw-component-tag, .spec-pill, .operator-chip) {
  gap: var(--handle-gap, 0.38rem);
}

:where(.spw-state-inspector, [data-spw-state-inspector], .read-inspect-panel, .kernel-inspector) .spw-component-tag {
  min-inline-size: 2.8rem; /* prevent aggressive shrinking that causes clipping */
  padding-inline: 0.5rem;
}

/* ==========================================================================
   3. Handle layout, siblings, and room seams
   ========================================================================== */

:where(.frame-topline, .frame-heading) > :where(.spec-strip, .frame-operators, .spw-component-meta) {
  min-width: 0;
}

:where(.frame-topline, .frame-heading) > .spw-component-meta {
  margin-left: auto;
  justify-content: flex-end;
}

:where(.frame-topline > .frame-sigil + .spec-strip) {
  margin-inline-start: 0.1rem;
}

:where(.frame-topline > .frame-sigil + .spw-component-meta) {
  margin-inline-start: auto;
}

:where(.frame-operators > * + *, .spec-strip > * + *)::before {
  content: none;
}

/* Dense seams become descriptive when metadata mode is on. */
html[data-spw-show-semantic-metadata="on"] :where(.frame-operators > *, .spec-strip > *)[data-spw-operator]::after {
  content: attr(data-spw-operator);
  position: absolute;
  inset: auto auto calc(100% + 0.2rem) 50%;
  transform: translateX(-50%);
  padding: 0.08rem 0.32rem;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--handle-radius-pill);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  color: var(--handle-ink-soft);
  font-family: var(--handle-meta-font);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity var(--handle-duration-fast) var(--handle-ease);
}

html[data-spw-show-semantic-metadata="on"] :where(.frame-operators > *, .spec-strip > *)[data-spw-operator]:is(:hover, :focus-visible)::after {
  opacity: 0.92;
}

/* Rich route choices and card-body links carry operator metadata, but their
   contents are card anatomy rather than inline handles. Preserve the component
   grid contract instead of letting the handle primitive compress them. */
:where(.spw-route-bridge__links a[data-spw-operator], a.frame-card[data-spw-operator], .frame-card > a:first-child[data-spw-operator]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  justify-content: stretch;
  justify-items: start;
  gap: var(--card-rhythm, var(--component-gap-tight, 0.65rem));
  inline-size: 100%;
  max-inline-size: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  overflow-wrap: anywhere;
  text-align: start;
  white-space: normal;
}


}

/* /public/css/handles/operators/sigils-and-chips.css */
@layer handles {
/* ==========================================================================
   operators/sigils-and-chips.css — the visible instruments
   --------------------------------------------------------------------------
   Reads as: frame sigils, operator chips, spec pills, component tags: the faces readers actually touch
   Was: handles/operators.css §4–5 (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: aria-current, aria-pressed, data-site-setting-active, data-spw-annotation-match, data-spw-annotation-state, data-spw-collected, data-spw-color-mode, data-spw-debug-mode, data-spw-fixity-tier, data-spw-grounded, data-spw-load-posture, data-spw-load-timing, data-spw-meaning-mode, data-spw-operator
   Genome — custom properties defined: 21; intent hooks consumed: --operator-chip-active-animation-intent, --operator-chip-active-bg-intent, --operator-chip-active-border-intent, --operator-chip-active-ink-intent, --operator-chip-active-lift-intent, --operator-chip-active-shadow-intent, --operator-chip-active-weight-intent
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   4. Frame sigils
   --------------------------------------------------------------------------
   Frame sigils are anchor handles. Hidden by default except in room-sign seams.
   ========================================================================== */

.frame-sigil {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  overflow: hidden;
  font-size: 0;
}

.frame-topline .frame-sigil,
.frame-heading .frame-sigil {
  position: static;
  display: inline-flex;
  inline-size: fit-content;
  width: auto;
  max-width: 100%;
  overflow: visible;
  min-height: 1.62rem;
  padding: 0.12rem 0.54rem 0.12rem 0.62rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-inline-start-width: 1.5px;
  border-radius: var(--shape-control, 0.78rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
  color: color-mix(in srgb, var(--ink-soft) 88%, var(--active-op-color, var(--teal)) 12%);
  font-size: var(--text-size-label, 0.76rem);
  line-height: var(--spw-frame-sigil-line-height, 1);
  opacity: 0.82;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    opacity var(--handle-duration-fast) var(--handle-ease),
    color var(--handle-duration-fast) var(--handle-ease),
    border-color var(--handle-duration-fast) var(--handle-ease);
}

:where(.frame-topline .frame-sigil, .frame-heading .frame-sigil):hover,
:where(.frame-topline .frame-sigil, .frame-heading .frame-sigil):focus-visible {
  opacity: 1;
  color: var(--active-op-color, var(--teal));
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 36%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, var(--active-op-color, var(--teal)) 10%);
  outline: none;
}

:where(.frame-topline .frame-sigil + .spec-strip, .frame-heading .frame-sigil + .spw-component-meta) {
  align-self: flex-start;
  margin-inline-start: 0.22rem;
}

:where(.frame-topline > [data-spw-slot="meta"], .frame-heading > [data-spw-slot="meta"]) {
  order: 0;
  margin-inline-start: auto;
}

/* Positional grammar seams (prefix / infix / postfix) */
:where([data-spw-sigil-position="prefix"]) {
  border-inline-start-width: 2px;
}

:where([data-spw-sigil-position="infix"]) {
  border-style: dashed;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

:where([data-spw-sigil-position="postfix"]) {
  border-inline-end-width: 2px;
}

:where([data-spw-fixity-tier="volatile"]) {
  --spw-fixity-alpha: 0.72;
}

/* ==========================================================================
   5. Operator chips, spec pills, and component tags
   ========================================================================== */

.operator-chip {
  --operator-chip-border-width: 1px;
  --operator-chip-border-style: solid;
  --operator-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 92%, var(--active-op-color, var(--teal)) 8%);
  --operator-chip-border: color-mix(in oklab, var(--active-op-color, var(--teal)) 18%, transparent);
  --operator-chip-ink: color-mix(in oklab, var(--active-op-color, var(--teal)) 76%, var(--ink, rgba(14, 18, 20, 0.92)));
  --operator-chip-shadow: none;
  --operator-chip-hover-bg: color-mix(in oklab, var(--surface-strong, #fff) 88%, var(--active-op-color, var(--teal)) 12%);
  --operator-chip-hover-border: var(--operator-chip-border);
  --operator-chip-hover-ink: var(--ink);
  --operator-chip-hover-shadow: var(--operator-chip-shadow);
  --operator-chip-hover-lift: 0px;
  --operator-chip-active-bg: var(--operator-chip-active-bg-intent, color-mix(in oklab, var(--surface-strong, #fff) 82%, var(--active-op-color, var(--teal)) 18%));
  --operator-chip-active-border: var(--operator-chip-active-border-intent, color-mix(in oklab, var(--active-op-color, var(--teal)) 44%, transparent));
  --operator-chip-active-ink: var(--operator-chip-active-ink-intent, color-mix(in oklab, var(--active-op-color, var(--teal)) 88%, var(--ink, rgba(14, 18, 20, 0.92))));
  --operator-chip-active-shadow: var(--operator-chip-active-shadow-intent,
    inset 0 1px 0 color-mix(in srgb, white 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent),
    0 0.18rem 0.85rem color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent));
  --operator-chip-active-weight: var(--operator-chip-active-weight-intent, 650);
  --operator-chip-active-lift: var(--operator-chip-active-lift-intent, 0px);
  --operator-chip-active-animation: var(--operator-chip-active-animation-intent, none);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spw-control-gap, 0.28rem);
  min-height: var(--spw-control-min-height, max(2.15rem, var(--touch-target-compact, 2.25rem)));
  padding: var(--spw-control-padding-block, 0.28rem) var(--spw-control-padding-inline, 0.72rem);
  border-width: var(--operator-chip-border-width);
  border-style: var(--operator-chip-border-style);
  border-radius: var(--spw-control-radius, var(--shape-control, 0.78rem));
  white-space: nowrap;
  text-decoration: none;
  line-height: var(--spw-control-line-height, 1.08);
  font-size: var(--text-size-chip, 0.82rem);
  background: var(--operator-chip-bg);
  border-color: var(--operator-chip-border);
  color: var(--operator-chip-ink);
  font-weight: 500;
  box-shadow: var(--operator-chip-shadow);
  transition:
    background-color var(--spw-interaction-commit, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    border-color var(--spw-interaction-commit, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    color var(--spw-interaction-commit, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    box-shadow var(--spw-interaction-settle, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    transform var(--spw-interaction-acknowledge, var(--handle-duration-fast, 140ms) var(--handle-ease, ease));
}

.operator-chip:hover,
.operator-chip:focus-visible {
  background: var(--operator-chip-hover-bg);
  border-color: var(--operator-chip-hover-border);
  color: var(--operator-chip-hover-ink);
  box-shadow: var(--operator-chip-hover-shadow);
  transform: translateY(var(--operator-chip-hover-lift));
  outline: none;
}

/* Microinteraction refinement tied to runtime load posture/timing.
   When the page was loaded in a "quiet" or "defer" posture (user or editor choice),
   tone down the physical feedback (lift, shadow) for calmer feel.
   This is rule refinement using the explicit load attrs we added for discovery/customization. */
html[data-spw-load-posture="quiet"] .operator-chip:hover,
html[data-spw-load-posture="quiet"] .operator-chip:focus-visible,
html[data-spw-load-timing="quiet"] .operator-chip:hover,
html[data-spw-load-timing="quiet"] .operator-chip:focus-visible,
html[data-spw-load-timing="defer"] .operator-chip:hover,
html[data-spw-load-timing="defer"] .operator-chip:focus-visible {
  transform: none;
  box-shadow: var(--operator-chip-hover-shadow, 0 1px 3px rgba(0,0,0,0.06));
}

/* Probe and pragma chips should not feel interchangeable.
   Probe stays open/reversible; pragma reads as a stronger local constraint. */
.operator-chip[data-spw-operator="probe"],
.operator-chip[data-spw-operator="wonder"] {
  --operator-chip-border-style: dashed;
  --operator-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 95%, var(--op-probe-color, var(--active-op-color, var(--teal))) 5%);
  --operator-chip-border: color-mix(in oklab, var(--op-probe-color, var(--active-op-color, var(--teal))) 28%, transparent);
  --operator-chip-hover-bg: color-mix(in oklab, var(--surface-strong, #fff) 90%, var(--op-probe-color, var(--active-op-color, var(--teal))) 10%);
}

.operator-chip[data-spw-operator="pragma"],
.operator-chip[data-spw-operator="action"] {
  --operator-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 88%, var(--op-pragma-color, var(--active-op-color, var(--teal))) 12%);
  --operator-chip-border: color-mix(in oklab, var(--op-pragma-color, var(--active-op-color, var(--teal))) 34%, transparent);
  --operator-chip-hover-bg: color-mix(in oklab, var(--surface-strong, #fff) 84%, var(--op-pragma-color, var(--active-op-color, var(--teal))) 16%);
  --operator-chip-hover-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--op-pragma-color, var(--active-op-color, var(--teal))) 16%, transparent);
}

:where(.operator-chip, .spec-pill, .syntax-token)[data-spw-collected="true"] {
  --operator-chip-border-style: solid;
  --operator-chip-hover-lift: -1px;
  box-shadow:
    var(--operator-chip-shadow, none),
    0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal))) 26%, transparent),
    0 0 calc(0.7rem + var(--spw-collection-strength, 0) * 0.4rem) color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal))) 14%, transparent);
}

:where(.operator-chip:is([aria-pressed="true"], [data-site-setting-active="true"])) {
  background: var(--operator-chip-active-bg);
  border-color: var(--operator-chip-active-border);
  color: var(--operator-chip-active-ink);
  box-shadow: var(--operator-chip-active-shadow);
  font-weight: var(--operator-chip-active-weight);
  transform: translateY(var(--operator-chip-active-lift));
  animation: var(--operator-chip-active-animation);
}

html[data-spw-color-mode="dark"] .operator-chip {
  --operator-chip-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 88%, var(--active-op-color, var(--teal, #008080)) 12%);
  --operator-chip-border: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, rgba(255, 255, 255, 0.16) 58%);
  --operator-chip-ink: color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
  --operator-chip-hover-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 78%, var(--active-op-color, var(--teal, #008080)) 22%);
  --operator-chip-hover-border: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 54%, rgba(255, 255, 255, 0.18) 46%);
  --operator-chip-hover-ink: var(--ink-strong, rgba(245, 247, 250, 0.98));
  --operator-chip-active-bg: var(--operator-chip-active-bg-intent, color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 66%, var(--active-op-color, var(--teal, #008080)) 34%));
  --operator-chip-active-border: var(--operator-chip-active-border-intent, color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 62%, rgba(255, 255, 255, 0.2) 38%));
  --operator-chip-active-ink: var(--operator-chip-active-ink-intent, var(--ink-strong, rgba(245, 247, 250, 0.98)));
  --operator-chip-active-shadow: var(--operator-chip-active-shadow-intent,
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 22%, transparent),
    0 0.18rem 0.85rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 14%, transparent));
  --operator-chip-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.08);
  --operator-chip-hover-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 14%, transparent);
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"] .operator-chip {
    --operator-chip-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 88%, var(--active-op-color, var(--teal, #008080)) 12%);
    --operator-chip-border: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, rgba(255, 255, 255, 0.16) 58%);
    --operator-chip-ink: color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
    --operator-chip-hover-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 78%, var(--active-op-color, var(--teal, #008080)) 22%);
    --operator-chip-hover-border: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 54%, rgba(255, 255, 255, 0.18) 46%);
    --operator-chip-hover-ink: var(--ink-strong, rgba(245, 247, 250, 0.98));
    --operator-chip-active-bg: var(--operator-chip-active-bg-intent, color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 66%, var(--active-op-color, var(--teal, #008080)) 34%));
    --operator-chip-active-border: var(--operator-chip-active-border-intent, color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 62%, rgba(255, 255, 255, 0.2) 38%));
    --operator-chip-active-ink: var(--operator-chip-active-ink-intent, var(--ink-strong, rgba(245, 247, 250, 0.98)));
    --operator-chip-active-shadow: var(--operator-chip-active-shadow-intent,
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 22%, transparent),
      0 0.18rem 0.85rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 14%, transparent));
    --operator-chip-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 0 0 1px rgba(0,0,0,0.08);
    --operator-chip-hover-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 14%, transparent);
  }
}

.spec-pill {
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 88%, var(--active-op-color, var(--teal)) 12%);
  border-color: color-mix(in oklab, var(--active-op-color, var(--teal)) 18%, var(--handle-line-soft) 82%);
  background: color-mix(in oklab, var(--surface-strong, #fff) 94%, var(--active-op-color, var(--teal)) 6%);
  border-radius: var(--shape-control, 0.78rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.spw-discovery-notice__handle.spec-pill {
  display: inline-flex;
  align-items: center;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  min-height: 0;
  padding: 0.08rem 0.34rem;
  border-radius: var(--shape-element, 4px);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, var(--active-op-color, var(--teal)) 12%);
  color: color-mix(in srgb, rgba(14, 18, 20, 0.96) 88%, var(--active-op-color, var(--teal)) 12%);
  font-family: var(--site-mono-font, monospace);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
}

:where(html[data-spw-color-mode="dark"]) :where(.site-frame, .frame-card, .frame-panel, .mode-panel) :where(.spw-component-tag, .spec-pill) {
  background: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 88%, var(--active-op-color, var(--teal, #008080)) 12%);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 36%, rgba(255, 255, 255, 0.16) 64%);
  color: color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.08);
}

@media (prefers-color-scheme: dark) {
  :where(html[data-spw-color-mode="auto"]) :where(.site-frame, .frame-card, .frame-panel, .mode-panel) :where(.spw-component-tag, .spec-pill) {
    background: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 88%, var(--active-op-color, var(--teal, #008080)) 12%);
    border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 36%, rgba(255, 255, 255, 0.16) 64%);
    color: color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 0 0 1px rgba(0,0,0,0.08);
  }
}

.spw-discovery-notice__handle.spec-pill {
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, var(--active-op-color, var(--teal)) 12%);
  color: color-mix(in srgb, rgba(14, 18, 20, 0.96) 88%, var(--active-op-color, var(--teal)) 12%);
}

:where(
  a.spec-pill,
  a.badge,
  a.tag,
  a.pill,
  a.frame-sigil,
  a.frame-card-sigil,
  a.spw-component-tag,
  a.spw-guide-chip
):visited {
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--active-op-color, var(--teal)) 18%);
  background: var(--handle-bg);
  border-color: var(--handle-line-soft);
}

a.operator-chip:visited {
  color: var(--operator-chip-ink);
  background: var(--operator-chip-bg);
  border-color: var(--operator-chip-border);
}

:where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation
)[data-spw-grounded="true"]:not([aria-current="page"]) {
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--active-op-color, var(--teal)) 18%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent 68%),
    color-mix(in oklab, var(--surface-strong, #fff) 90%, var(--active-op-color, var(--teal)) 10%);
  border-color: color-mix(in oklab, var(--active-op-color, var(--teal)) 18%, var(--handle-line-soft));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 0 0 1px color-mix(in oklab, var(--active-op-color, var(--teal)) 8%, transparent);
}

:where(html[data-spw-color-mode="dark"]) :where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation
)[data-spw-grounded="true"]:not([aria-current="page"]) {
  color: var(--operator-chip-ink, color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 68%),
    var(--operator-chip-bg, color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 86%, var(--active-op-color, var(--teal, #008080)) 14%));
  border-color: var(--operator-chip-border, color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, rgba(255, 255, 255, 0.16) 58%));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(0,0,0,0.12);
}

@media (prefers-color-scheme: dark) {
  :where(html[data-spw-color-mode="auto"]) :where(
    .operator-chip,
    .spec-pill,
    .badge,
    .tag,
    .pill,
    .frame-sigil,
    .frame-card-sigil,
    .spw-component-tag,
    .spw-guide-chip,
    .header-annotation
  )[data-spw-grounded="true"]:not([aria-current="page"]) {
    color: var(--operator-chip-ink, color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%));
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), transparent 68%),
      var(--operator-chip-bg, color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 86%, var(--active-op-color, var(--teal, #008080)) 14%));
    border-color: var(--operator-chip-border, color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, rgba(255, 255, 255, 0.16) 58%));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 0 0 1px rgba(0,0,0,0.12);
  }
}

:where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation
)[data-spw-grounded="true"]:not([aria-current="page"])::before {
  content: "";
  inline-size: 0.36rem;
  block-size: 0.36rem;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-inline-end: 0.14rem;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), transparent 38%),
    color-mix(in oklab, var(--active-op-color, var(--teal)) 72%, transparent);
  box-shadow: 0 0 0.5rem color-mix(in oklab, var(--active-op-color, var(--teal)) 16%, transparent);
}

.spw-component-tag {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.24em;
  flex: 0 1 auto;
  width: fit-content;
  max-inline-size: min(100%, 28ch);
  min-inline-size: 8ch;
  border-radius: var(--handle-radius-tight);
  color: var(--ink);
  background: var(--semantic-metadata-bg, color-mix(in srgb, var(--surface-strong, #fff) 90%, transparent));
  border-color: var(--semantic-metadata-line, color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 88%, transparent));
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  font: inherit;
  line-height: 1.16;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spw-guide-chip {
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--handle-radius-tight);
  background: var(--semantic-metadata-bg, color-mix(in oklab, var(--surface-soft, #fff) 88%, var(--active-op-color, var(--teal)) 12%));
  color: var(--semantic-metadata-ink, color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--active-op-color, var(--teal)) 18%));
  border-color: var(--semantic-metadata-line, color-mix(in oklab, var(--active-op-color, var(--teal)) 18%, var(--handle-line-soft) 82%));
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  font: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Substrate-aware tags and guide chips inherit the broader linguistic system. */
:where(.spw-component-tag, .spw-guide-chip)[data-spw-substrate] {
  color: var(--spw-substrate-color, color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 78%, var(--active-op-color, var(--teal)) 22%));
  border-color: color-mix(in oklab, var(--spw-substrate-border, var(--handle-line-soft)) 94%, transparent);
  background: color-mix(in oklab, var(--spw-substrate-bg-soft, var(--surface-soft)) 82%, var(--active-op-color, var(--teal)) 18%);
}

:where(.spw-component-tag, .spw-guide-chip)[data-spw-role]::before,
:where(.spw-component-tag, .spw-guide-chip)[data-spw-stance]::after {
  font-size: 0.9em;
  opacity: 0.6;
}

:where(.spw-component-tag, .spw-guide-chip)[data-spw-role]::before {
  margin-right: 0.24em;
}

html[data-spw-show-semantic-metadata="on"] :where(.spw-component-tag, .spw-guide-chip)[data-spw-role]::before,
html[data-spw-debug-mode="on"] :where(.spw-component-tag, .spw-guide-chip)[data-spw-role]::before {
  content: attr(data-spw-role);
}

html[data-spw-show-semantic-metadata="on"] :where(.spw-component-tag, .spw-guide-chip)[data-spw-stance]::after {
  content: attr(data-spw-stance);
  margin-left: 0.28em;
  text-transform: uppercase;
}

html[data-spw-debug-mode="on"] :where(.spw-component-tag, .spw-guide-chip)[data-spw-stance]::after {
  content: attr(data-spw-stance);
  margin-left: 0.28em;
  text-transform: uppercase;
}

:where(.spw-component-tag, .spw-guide-chip, .header-annotation):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--delight-color, var(--teal, #008080)) 28%, transparent);
  background: color-mix(in oklab, var(--surface-strong, #fff) 88%, var(--delight-color, var(--teal, #008080)) 12%);
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 84%, var(--delight-color, var(--teal, #008080)) 16%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--delight-color, var(--teal, #008080)) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  outline: none;
}

:where([data-spw-annotation-match="true"]) {
  --spw-field-intensity: max(var(--spw-field-intensity, 0), 0.42);
  outline: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent);
  outline-offset: 2px;
}

:where([data-spw-annotation-state="preview"]) {
  --spw-field-intensity: max(var(--spw-field-intensity, 0), 0.34);
}

:where([data-spw-annotation-state="pinned"]) {
  --spw-field-intensity: max(var(--spw-field-intensity, 0), 0.58);
}

:where(html[data-spw-meaning-mode="quiet"]) :where(
  .spw-component-meta,
  .spw-component-guides,
  .spw-semantic-seam,
  .spw-section-handle-shell
) {
  opacity: 0.78;
}

:where(html[data-spw-meaning-mode="inspect"]) :where(
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation,
  [data-spw-annotation-match="true"]
) {
  --handle-line: color-mix(in srgb, var(--active-op-color, var(--teal)) 48%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent),
    var(--handle-shadow-rest);
}

:where(html[data-spw-meaning-mode="screenshot"]) :where(
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation,
  .operator-chip,
  .spec-pill,
  [data-spw-annotation-match="true"]
) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 42%, var(--line, rgba(14, 18, 20, 0.14)));
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, transparent);
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 88%, var(--active-op-color, var(--teal)) 12%);
}


}

/* /public/css/handles/operators/attention-states.css */
@layer handles {
/* ==========================================================================
   operators/attention-states.css — how handles notice you
   --------------------------------------------------------------------------
   Reads as: hover, focus, keyboard arrival, and the literate underline seam
   Was: handles/operators.css §6–7 (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: data-spw-charge-key, data-spw-handle, data-spw-inline-form, data-spw-nav-destination, data-spw-operator, data-spw-operator-reversibility, data-spw-page-arrival, data-spw-page-arrival-step, data-spw-page-transition-phase
   Genome — custom properties defined: 2; intent hooks consumed: none
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   6. Hover / focus / keyboard states
   ========================================================================== */

:where(
  .syntax-token,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .spw-delimiter,
  .operator-chip,
  [data-spw-handle="true"],
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 76%, transparent);
  background: var(--handle-bg-active);
  box-shadow: var(--handle-shadow-focus);
  outline: none;
}

:where(.spec-pill, .badge, .tag, .pill):hover {
  transform: none;
}

:where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .spw-spell-button,
  .spw-spell-shell,
  .spw-spell-link
):is(
  [data-spw-operator-reversibility="reversible"],
  [data-spw-operator-reversibility="recoverable"],
  [data-spw-operator-reversibility="returnable"],
  [data-spw-operator-reversibility="deferrable"],
  [data-spw-operator-reversibility="inspectable"],
  [data-spw-operator-reversibility="revisable"],
  [data-spw-operator-reversibility="replayable"]
) {
  border-style: dashed;
}

:where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .spw-spell-button,
  .spw-spell-shell,
  .spw-spell-link
):is(
  [data-spw-operator-reversibility="committing"],
  [data-spw-operator-reversibility="sticky"],
  [data-spw-operator-reversibility="constraining"],
  [data-spw-operator-reversibility="projected"],
  [data-spw-operator-reversibility="scoping"]
) {
  box-shadow:
    inset 0 -1.5px 0 color-mix(in srgb, currentColor 22%, transparent),
    var(--handle-shadow-rest);
}

:where(
  html[data-spw-page-arrival]:not([data-spw-page-arrival="settled"]),
  html[data-spw-page-transition-phase]:not([data-spw-page-transition-phase="settled"])
) :where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip
) {
  transition-timing-function: var(--ease-settle, ease);
}

:where(html[data-spw-page-arrival-step="1"]) :where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip
):not(:hover):not(:focus-visible) {
  --handle-arrival-lift: 1px;
  --handle-arrival-opacity: 0.96;
}

:where(html[data-spw-page-arrival-step="2"]) :where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip
):not(:hover):not(:focus-visible) {
  --handle-arrival-lift: 0.5px;
  --handle-arrival-opacity: 0.985;
}

:where(
  .syntax-token,
  .spw-delimiter,
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):hover {
  transform: none;
}

/* ==========================================================================
   7. Literate underline seam
   --------------------------------------------------------------------------
   These seams help inline semantics remain readable inside prose.
   ========================================================================== */

:where(
  .syntax-token,
  .spw-delimiter,
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):not(.operator-chip):not(.frame-sigil):not(.spw-component-tag):not(.spw-guide-chip) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-decoration-thickness: var(--handle-underline-thickness);
  text-underline-offset: var(--handle-underline-offset);
  text-decoration-skip-ink: auto;
}

:where(
  .syntax-token,
  .spw-delimiter,
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):not(.operator-chip):not(.frame-sigil):not(.spw-component-tag):not(.spw-guide-chip):is(:hover, :focus-visible) {
  text-decoration-color: color-mix(in srgb, currentColor 62%, transparent);
}

/* ARIA + navigation-spells hygiene: directional affordance for destination semantics on key link families.
   projection (cross-route) gets a distinct forward-leaning treatment; scope/settle stay more contained. */
:where(
  .operator-chip,
  .header-sigil,
  .frame-operators a,
  .site-header nav a,
  body > header nav a
)[data-spw-nav-destination="projection"] {
  text-decoration-style: solid;
  text-decoration-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 42%, transparent);
  text-decoration-thickness: calc(var(--handle-underline-thickness, 1.5px) * 1.1);
}

:where(
  .operator-chip,
  .header-sigil,
  .frame-operators a,
  .site-header nav a,
  body > header nav a
)[data-spw-nav-destination="scope"] {
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}

:where(
  .operator-chip,
  .header-sigil,
  .frame-operators a,
  .site-header nav a,
  body > header nav a
)[data-spw-nav-destination="settle"] {
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
}

:where(em .syntax-token, em .spw-delimiter, em :where(a, button, span, strong, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])),
:where(i .syntax-token, i .spw-delimiter, i :where(a, button, span, strong, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}


}

/* /public/css/handles/operators/state-semantics.css */
@layer handles {
/* ==========================================================================
   operators/state-semantics.css — what pressed means here
   --------------------------------------------------------------------------
   Reads as: the mode-switch and pressed-state contracts; routes speak through -intent variables only
   Was: handles/operators.css §8–9 (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: aria-current, aria-label, aria-pressed, data-set-mode, data-spw-allocation, data-spw-annotation-match, data-spw-bookmarked, data-spw-cauldron, data-spw-cauldron-mirror, data-spw-charge, data-spw-debug-mode, data-spw-form, data-spw-gesture, data-spw-ingredient-primed
   Genome — custom properties defined: 29; intent hooks consumed: --mode-switch-active-bg-intent, --mode-switch-active-border-intent, --mode-switch-active-ink-intent, --mode-switch-active-lift-intent, --mode-switch-active-shadow-intent, --mode-switch-active-weight-intent, --mode-switch-border-width-intent, --mode-switch-focus-shadow-intent, --mode-switch-hover-bg-intent, --mode-switch-hover-border-intent, --mode-switch-hover-ink-intent, --mode-switch-hover-lift-intent, --mode-switch-hover-shadow-intent, --mode-switch-idle-bg-intent, --mode-switch-idle-border-intent, --mode-switch-idle-ink-intent, --mode-switch-idle-shadow-intent, --mode-switch-idle-weight-intent, --mode-switch-pressed-animation-intent
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   8. Handle state semantics
   --------------------------------------------------------------------------
   Selection, activation, latch, bookmark, knowledge, and allocation states.
   ========================================================================== */

:where([data-spw-selection="focused"]) {
  --handle-line: color-mix(in srgb, var(--active-op-color, var(--teal)) 54%, transparent);
}

:where(
  .operator-chip[aria-current="page"],
  [data-spw-selection="active"],
  [data-spw-selection="selected"]
) {
  background: var(--handle-bg-selected);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 38%, transparent);
  border-width: 1.5px;
  color: color-mix(in srgb, var(--active-op-color, var(--teal)) 86%, var(--ink, rgba(14, 18, 20, 0.92)));
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent),
    0 2px 8px color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent);
}

:where(
  .frame-sigil.is-selected,
  .frame-sigil[aria-pressed="true"]
) {
  background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 92%, var(--active-op-color, var(--teal)) 8%);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  color: color-mix(in srgb, var(--active-op-color, var(--teal)) 76%, var(--ink, rgba(14, 18, 20, 0.92)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 2px 8px color-mix(in srgb, var(--active-op-color, var(--teal)) 5%, transparent);
}

:where([data-spw-latched="true"]) {
  background: color-mix(in srgb, var(--handle-bg) 86%, var(--active-op-color, var(--teal)) 8%);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 48%, transparent);
  box-shadow: var(--handle-shadow-latched);
  transform: translateY(0.5px);
}

:where([data-spw-pinned="true"], [data-spw-bookmarked="true"]) {
  border-color: color-mix(in srgb, var(--amber, #ffaa00) 62%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--amber, #ffaa00) 9%, transparent) 0%,
      transparent 100%
    ),
    var(--handle-bg);
}

:where([data-spw-pinned="true"], [data-spw-bookmarked="true"])::after {
  content: "";
  position: absolute;
  inset: auto 0.28rem 0.16rem auto;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber, #ffaa00) 72%, transparent);
  opacity: 0.82;
}

:where([data-spw-knowledge="gained"]) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 32%, var(--line, transparent));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent),
      transparent 52%
    ),
    var(--handle-bg);
}

/* Allocation helps later copy generation: where is this token trying to live? */
:where([data-spw-allocation]) {
  --handle-allocation-color: var(--spw-substrate-color, var(--active-op-color, var(--teal)));
}

:where([data-spw-allocation="inline"]) {
  border-style: solid;
}

:where([data-spw-allocation="adjacent"]) {
  border-style: dashed;
}

:where([data-spw-allocation="room"]) {
  border-style: double;
}

html[data-spw-show-semantic-metadata="on"] :where([data-spw-allocation])::before {
  content: attr(data-spw-allocation);
  position: absolute;
  inset: auto auto calc(100% + 0.2rem) 50%;
  transform: translateX(-50%);
  padding: 0.08rem 0.28rem;
  border-radius: var(--handle-radius-pill);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--handle-allocation-color) 22%, transparent);
  color: var(--handle-ink-soft);
  font-family: var(--handle-meta-font);
  font-size: 0.54rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}

html[data-spw-show-semantic-metadata="on"] :where([data-spw-allocation]:is(:hover, :focus-visible))::before {
  opacity: 0.92;
}

.mode-switch {
  --spw-lens-cascade-color: var(--active-op-color, var(--teal));
  --spw-lens-track-bg: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 88%, var(--spw-lens-cascade-color) 12%);
  --spw-lens-track-border: color-mix(in srgb, var(--spw-lens-cascade-color) 20%, var(--line, rgba(14, 18, 20, 0.14)) 80%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spw-control-gap, 0.24rem) + 0.1rem);
  min-width: 0;
  padding: 0.16rem;
  border: 1px solid var(--spw-lens-track-border);
  border-radius: var(--shape-control, 0.68rem);
  background: var(--spw-lens-track-bg);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface-strong, #fff) 44%, transparent),
    0 0 0 1px color-mix(in srgb, var(--spw-lens-cascade-color) 7%, transparent);
  isolation: isolate;
}

.mode-switch[aria-label]::before {
  content: attr(aria-label);
  flex: 0 0 auto;
  max-inline-size: min(100%, 22ch);
  overflow: hidden;
  padding: 0.14rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent);
  border-radius: 999px;
  box-shadow: var(--spw-chassis-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.2));
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.72)) 82%, var(--active-op-color, var(--teal)) 18%);
  font-family: var(--handle-meta-font, var(--site-mono-font, monospace));
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-wrap: balance;
  white-space: nowrap;
}

.mode-switch[data-spw-lens-feedback]::after {
  content: attr(data-spw-lens-feedback);
  flex: 1 1 9rem;
  min-inline-size: 0;
  max-inline-size: min(100%, 24ch);
  overflow: hidden;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--ink-muted, rgba(14, 18, 20, 0.64)) 78%, var(--spw-lens-cascade-color) 22%);
  font-family: var(--handle-meta-font, var(--site-mono-font, monospace));
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow viewports: unwrap the lens label and give pills a stable 2×2 grid. */
@media (max-width: 56rem) {
  .mode-switch[aria-label] {
    display: grid;
    grid-template-columns: repeat(2, minmax(7.25rem, 1fr));
    align-items: stretch;
    width: 100%;
    gap: calc(var(--spw-control-gap, 0.24rem) + 0.14rem);
  }

  .mode-switch[data-spw-lens-feedback]::after {
    grid-column: 1 / -1;
    max-inline-size: 100%;
  }

  .mode-switch[aria-label]::before {
    grid-column: 1 / -1;
    flex: none;
    width: 100%;
    max-inline-size: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-wrap: balance;
  }

  .mode-switch .frame-sigil {
    flex: 1 1 auto;
    inline-size: auto;
    width: auto;
    min-inline-size: 0;
    font-size: clamp(0.72rem, 2.7vw, calc(var(--text-size-chip, 0.84rem) - 0.04rem));
    padding-inline: calc(var(--spw-control-padding-inline, 0.72rem) - 0.2rem);
  }
}

/* Shared mode-switch state lives here; routes supply palette/intent through
   --mode-switch-*-intent variables (set on the switch, a sigil, or any ancestor)
   instead of re-describing pressed/hover logic. The -intent indirection exists
   because these defaults are declared on the sigil itself in the handles layer,
   which outranks both route-layer declarations and inherited ancestor values. */
.mode-switch .frame-sigil {
  --mode-switch-border-width: var(--mode-switch-border-width-intent, 1px);
  --mode-switch-idle-bg: var(--mode-switch-idle-bg-intent, color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 90%, var(--active-op-color, var(--teal)) 10%));
  --mode-switch-idle-border: var(--mode-switch-idle-border-intent, color-mix(in srgb, var(--active-op-color, var(--teal)) 34%, var(--line, rgba(14, 18, 20, 0.14)) 66%));
  --mode-switch-idle-ink: var(--mode-switch-idle-ink-intent, color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 88%, var(--active-op-color, var(--teal)) 12%));
  --mode-switch-idle-shadow: var(--mode-switch-idle-shadow-intent,
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent));
  --mode-switch-idle-weight: var(--mode-switch-idle-weight-intent, 500);
  --mode-switch-hover-bg: var(--mode-switch-hover-bg-intent, color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 84%, var(--active-op-color, var(--teal)) 16%));
  --mode-switch-hover-border: var(--mode-switch-hover-border-intent, color-mix(in srgb, var(--active-op-color, var(--teal)) 42%, transparent));
  --mode-switch-hover-ink: var(--mode-switch-hover-ink-intent, var(--ink, rgba(14, 18, 20, 0.92)));
  --mode-switch-hover-shadow: var(--mode-switch-hover-shadow-intent,
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent));
  --mode-switch-hover-lift: var(--mode-switch-hover-lift-intent, var(--spw-control-hover-lift, -1px));
  --mode-switch-active-bg: var(--mode-switch-active-bg-intent, color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 72%, var(--active-op-color, var(--teal)) 28%));
  --mode-switch-active-border: var(--mode-switch-active-border-intent, color-mix(in srgb, var(--active-op-color, var(--teal)) 58%, transparent));
  --mode-switch-active-ink: var(--mode-switch-active-ink-intent, var(--ink, rgba(14, 18, 20, 0.92)));
  --mode-switch-active-weight: var(--mode-switch-active-weight-intent, 600);
  --mode-switch-active-shadow: var(--mode-switch-active-shadow-intent,
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 22%, transparent),
    0 2px 6px color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent));
  --mode-switch-active-lift: var(--mode-switch-active-lift-intent, 0px);
  --mode-switch-focus-shadow: var(--mode-switch-focus-shadow-intent,
    0 0 0 2px color-mix(in srgb, var(--active-op-color, var(--teal)) 20%, transparent),
    var(--mode-switch-hover-shadow));
  --mode-switch-pressed-animation: var(--mode-switch-pressed-animation-intent, spw-operator-breath 2s ease-in-out infinite);
  position: relative;
  top: auto;
  left: auto;
  display: inline-flex;
  flex: 1 1 max(7.5rem, 20%);
  inline-size: auto;
  width: auto;
  max-width: 100%;
  min-height: calc(var(--spw-control-min-height, 2.1rem) - 0.22rem);
  padding: calc(var(--spw-control-padding-block, 0.24rem) - 0.04rem) calc(var(--spw-control-padding-inline, 0.72rem) - 0.08rem);
  border: var(--mode-switch-border-width) solid var(--mode-switch-idle-border);
  border-radius: var(--spw-control-radius, var(--shape-control, 0.68rem));
  background: var(--mode-switch-idle-bg);
  box-shadow: var(--mode-switch-idle-shadow);
  opacity: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mode-switch-idle-ink);
  font-weight: var(--mode-switch-idle-weight);
  font-size: var(--text-size-chip, 0.84rem);
  line-height: 1.02;
  transition:
    background-color var(--spw-interaction-commit, var(--touch-commit, 180ms) var(--ease-mechanical, ease)),
    border-color var(--spw-interaction-commit, var(--touch-commit, 180ms) var(--ease-mechanical, ease)),
    color var(--spw-interaction-commit, var(--touch-commit, 180ms) var(--ease-mechanical, ease)),
    box-shadow var(--spw-interaction-settle, var(--touch-recover, 520ms) var(--ease-settle, ease)),
    transform var(--spw-interaction-acknowledge, var(--touch-acknowledge, 90ms) var(--ease-chassis, ease)),
    font-weight var(--spw-interaction-commit, var(--touch-commit, 180ms) var(--ease-mechanical, ease));
}

.mode-switch .frame-sigil[data-set-mode="surface"] {
  --active-op-color: var(--op-surface-color, var(--op-topic-color, var(--teal)));
}

.mode-switch .frame-sigil[data-set-mode="syntax"] {
  --active-op-color: var(--op-object-color, var(--teal));
}

.mode-switch .frame-sigil[data-set-mode="artifacts"] {
  --active-op-color: var(--op-stream-color, var(--op-frame-color, var(--teal)));
}

.mode-switch .frame-sigil[data-set-mode="website"] {
  --active-op-color: var(--op-action-color, var(--teal));
}

.mode-switch .frame-sigil:active {
  transform: translateY(var(--spw-control-press-depth, 1px)) scale(var(--spw-micro-press-scale, 0.998));
  transition:
    transform var(--spw-interaction-acknowledge, var(--touch-acknowledge, 90ms) var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1))),
    box-shadow var(--spw-interaction-acknowledge, var(--touch-acknowledge, 90ms) var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1)));
}

.mode-switch .frame-sigil[aria-pressed]::after {
  content: "";
  inline-size: 0.38rem;
  block-size: 0.38rem;
  margin-inline-start: 0.38rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.18;
  transform: scale(0.72);
  transition:
    opacity var(--spw-interaction-commit, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    transform var(--spw-interaction-acknowledge, var(--handle-duration-fast, 140ms) var(--handle-ease, ease));
}

@media (prefers-color-scheme: dark) {
  .mode-switch .frame-sigil {
    --mode-switch-idle-bg: var(--mode-switch-idle-bg-intent, color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.92)) 82%, var(--active-op-color, var(--teal)) 18%));
    --mode-switch-idle-border: var(--mode-switch-idle-border-intent, color-mix(in srgb, var(--active-op-color, var(--teal)) 44%, rgba(255, 255, 255, 0.18) 56%));
    --mode-switch-idle-ink: var(--mode-switch-idle-ink-intent, color-mix(in srgb, var(--ink, rgba(245, 247, 250, 0.96)) 92%, var(--active-op-color, var(--teal)) 8%));
    --mode-switch-hover-bg: var(--mode-switch-hover-bg-intent, color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.92)) 74%, var(--active-op-color, var(--teal)) 26%));
    --mode-switch-active-bg: var(--mode-switch-active-bg-intent, color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.92)) 64%, var(--active-op-color, var(--teal)) 36%));
    --mode-switch-active-ink: var(--mode-switch-active-ink-intent, color-mix(in srgb, var(--ink, rgba(245, 247, 250, 0.98)) 96%, var(--active-op-color, var(--teal)) 4%));
  }
}

.mode-switch .frame-sigil:is(:hover, :focus-visible) {
  background: var(--mode-switch-hover-bg);
  border-color: var(--mode-switch-hover-border);
  color: var(--mode-switch-hover-ink);
  box-shadow: var(--mode-switch-hover-shadow);
  opacity: 1;
  transform: translateY(var(--mode-switch-hover-lift));
}

.mode-switch .frame-sigil:focus-visible {
  box-shadow: var(--mode-switch-focus-shadow);
  outline: none;
}

/* Explicit selected state must come after the base .mode-switch .frame-sigil rule to win cascade. */
.mode-switch .frame-sigil[aria-pressed="true"] {
  background: var(--mode-switch-active-bg);
  border-color: var(--mode-switch-active-border);
  color: var(--mode-switch-active-ink);
  font-weight: var(--mode-switch-active-weight);
  box-shadow: var(--mode-switch-active-shadow);
  opacity: 1;
  transform: translateY(var(--mode-switch-active-lift));
  animation: var(--mode-switch-pressed-animation);
}

.mode-switch .frame-sigil[aria-pressed="true"]::after {
  opacity: 0.72;
  transform: scale(1);
}

.mode-switch .frame-sigil:not([aria-pressed="true"]) {
  opacity: 1;
  background: var(--mode-switch-idle-bg);
  border-color: var(--mode-switch-idle-border);
  color: var(--mode-switch-idle-ink);
  box-shadow: var(--mode-switch-idle-shadow);
  font-weight: var(--mode-switch-idle-weight);
  transform: none;
}

.mode-switch .frame-sigil:not([aria-pressed="true"]):is(:hover, :focus-visible) {
  opacity: 1;
}

@keyframes spw-lens-commit-pulse {
  0% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--surface-strong, #fff) 44%, transparent),
      0 0 0 1px color-mix(in srgb, var(--spw-lens-cascade-color) 7%, transparent);
  }

  42% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--surface-strong, #fff) 44%, transparent),
      0 0 0 3px color-mix(in srgb, var(--spw-lens-cascade-color) 18%, transparent);
  }

  100% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--surface-strong, #fff) 44%, transparent),
      0 0 0 1px color-mix(in srgb, var(--spw-lens-cascade-color) 7%, transparent);
  }
}

@keyframes spw-lens-panel-enter {
  from {
    opacity: 0.72;
    transform: translateY(0.18rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:where(.mode-switch[data-spw-lens-mode="surface"], [data-spw-lens-mode="surface"]) {
  --spw-lens-cascade-color: var(--op-surface-color, var(--op-topic-color, var(--teal)));
}

:where(.mode-switch[data-spw-lens-mode="syntax"], [data-spw-lens-mode="syntax"]) {
  --spw-lens-cascade-color: var(--op-object-color, var(--teal));
}

:where(.mode-switch[data-spw-lens-mode="artifacts"], [data-spw-lens-mode="artifacts"]) {
  --spw-lens-cascade-color: var(--op-stream-color, var(--op-frame-color, var(--teal)));
}

:where(.mode-switch[data-spw-lens-mode="website"], [data-spw-lens-mode="website"]) {
  --spw-lens-cascade-color: var(--op-action-color, var(--teal));
}

:where(.mode-switch[data-spw-lens-state="changed"]) {
  animation: spw-lens-commit-pulse 520ms var(--handle-ease, ease-out);
}

:where(.site-frame[data-spw-lens-mode]) > :where(.frame-topline, .frame-heading) {
  border-color: color-mix(in srgb, var(--spw-lens-cascade-color) 20%, var(--line, rgba(14, 18, 20, 0.14)) 80%);
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--spw-lens-cascade-color) 18%, transparent),
    var(--spw-local-shadow, none);
}

:where(.site-frame[data-spw-lens-state="changed"]) > :where(.frame-topline, .frame-heading) {
  transition:
    border-color var(--handle-duration-base, 180ms) var(--handle-ease, ease),
    box-shadow var(--handle-duration-base, 180ms) var(--handle-ease, ease);
}

:where([data-spw-lens-panel-state="active"]) {
  animation: spw-lens-panel-enter 220ms var(--handle-ease, ease-out);
}

:where(html[data-spw-debug-mode="on"], html[data-spw-module-visuals="on"])
  :where([data-spw-lens-deep-link]) > :where(.frame-topline, .frame-heading)::before {
  content: attr(data-spw-deep-link-state);
  display: inline-flex;
  align-items: center;
  max-inline-size: min(100%, 34ch);
  overflow: hidden;
  padding: 0.12rem 0.38rem;
  border: 1px dashed color-mix(in srgb, var(--spw-lens-cascade-color) 26%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--ink-soft, currentColor) 74%, var(--spw-lens-cascade-color) 26%);
  font-family: var(--handle-meta-font);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: lowercase;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  :where(.mode-switch[data-spw-lens-state="changed"], [data-spw-lens-panel-state="active"]) {
    animation: none;
  }
}

/* ==========================================================================
   9. Gesture states
   ========================================================================== */

:where([data-spw-form]) {
  transition:
    filter var(--handle-duration-base) var(--handle-settle-ease),
    transform var(--handle-duration-base) var(--handle-settle-ease),
    box-shadow var(--handle-duration-base) var(--handle-settle-ease),
    border-color var(--handle-duration-base) var(--handle-settle-ease);
}

:where([data-spw-gesture="charging"][data-spw-form="brace"]),
:where([data-spw-form="brace"]:hover),
:where([data-spw-form="brace"]:focus-within) {
  --brace-open-color: color-mix(in srgb, var(--spw-operator-color, var(--teal)) 54%, transparent);
  --brace-close-color: color-mix(in srgb, var(--spw-operator-color, var(--teal)) 34%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--spw-operator-color, var(--teal)) 16%, transparent));
}

[data-spw-charge="active"],
[data-spw-charge="sustained"],
[data-spw-charge="manifest"] {
  transform: none !important;
}

[data-spw-touch]:active,
[data-spw-touch="tap"]:active {
  transform: scale(0.985);
  transition: transform 60ms var(--ease-mechanical, ease);
}

:where([data-spw-gesture="active"][data-spw-form="brace"]) {
  --brace-open-color: color-mix(in srgb, var(--spw-operator-color, var(--teal)) 76%, transparent);
  --brace-close-color: color-mix(in srgb, var(--spw-operator-color, var(--teal)) 58%, transparent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--spw-operator-color, var(--teal)) 22%, transparent));
}

:where([data-spw-gesture="active"][data-spw-form="block"]) {
  box-shadow: var(--shadow-active, 0 4px 20px rgba(0, 0, 0, 0.10));
  transform: translateY(0.5px);
}

/* Cohesion patch (Patch 008): living garden terms and tended disclosures inherit core gesture charge/armed visuals for unified feel */
.spw-living-term[data-spw-gesture="armed"],
.spw-garden-tended [data-spw-living-term][data-spw-gesture="armed"] {
  border-bottom-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 55%, transparent);
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent);
}

/* ARIA hygiene: armed state on any focusable gesture target shows distinct "hold to commit" affordance.
   This bridges the data-spw-gesture state written by brace-gestures.js to visual + AT users. */
:where([data-spw-gesture="armed"]):focus-visible {
  outline: 1px dashed color-mix(in srgb, var(--active-op-color, var(--teal)) 65%, transparent);
  outline-offset: 2px;
}

.spw-living-term[data-spw-gesture="charging"],
.spw-garden-tended [data-spw-living-term][data-spw-gesture="charging"] {
  border-bottom-color: var(--active-op-color, var(--teal));
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 25%, transparent);
}

.spw-living-term[data-spw-gesture="sustained"],
.spw-garden-tended [data-spw-living-term][data-spw-gesture="sustained"] {
  border-bottom-style: solid;
  border-bottom-color: var(--active-op-color, var(--teal));
}

@keyframes spw-handle-sustain-breath {
  0%,
  100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--teal)) 18%, transparent);
  }

  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--teal)) 30%, transparent);
  }
}

:where([data-spw-gesture="sustained"][data-spw-form="brace"]),
:where([data-spw-gesture="sustained"][data-spw-form="block"]) {
  animation: spw-handle-sustain-breath 1.6s ease-in-out infinite;
}

:where([data-spw-gesture="projecting"][data-spw-form="brace"]) {
  transform: translate(calc(var(--drag-dx, 0px) * 0.03), calc(var(--drag-dy, 0px) * 0.03));
}

/* Interactive vocabulary development + resonance (vocabulary-resonance trope)
   - Terms carrying Spw/operator/brace/measure language become primable, wonder-charged objects.
   - Hover/prime/focus creates resonance (echo via wonder-memory, charge, annotation invitation).
   - Supports page-specific attentional rhythm and game/poetry-style discoverability.
   - Ties directly to 'vocabulary-resonance' trope and imagination-development north star.
   - Modern CSS: uses :has() + :focus-visible for clean, context-sensitive behavior. */
[data-spw-vocabulary-term],
[data-spw-semantic-expression],
.inline-note code,
.frame-note code {
  transition: color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
  cursor: help;
}

[data-spw-vocabulary-term]:is(:hover, :focus-visible),
[data-spw-semantic-expression]:is(:hover, :focus-visible),
.inline-note code:is(:hover, :focus-visible),
.frame-note code:is(:hover, :focus-visible) {
  color: var(--active-op-color);
  background: color-mix(in srgb, var(--active-op-color) 8%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color) 25%, transparent);
}

/* When a vocabulary term is primed (via wonder-memory, annotation, or explicit data attr)
   it participates in the larger resonance field — supports priming wonder mechanics
   and easter-egg-like moments of recognition. */
body:has([data-spw-wonder-state]:not([data-spw-wonder-state=""])) [data-spw-vocabulary-term],
body:has([data-spw-annotation-match]) [data-spw-vocabulary-term] {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Brace + operator + measurement topology enhancement (gestalt + phase coordination)
   When a brace is in a strong gesture/phase state and contains or is near
   measurement elements, strengthen proximity and common fate without causing
   wrapping surprises. Supports the "brace as manuscript layer container" and
   "fidget-tunable brace physics" directions. */
:where([data-spw-form="brace"][data-spw-gesture]:has([data-spw-measure-kind]),
       [data-spw-form="brace"][data-spw-gesture] [data-spw-measure-kind]) {
  --brace-measure-tint: color-mix(in srgb, var(--measure-tint, var(--spw-operator-color)) 22%, transparent);
  border-color: var(--brace-measure-tint);
  transition: border-color var(--duration-fast) var(--ease-settle);
}

:where([data-spw-form="brace"][data-spw-gesture="sustained"] [data-spw-measure-kind]) {
  /* Sustained brace gesture makes contained measures participate in the breath */
  animation: spw-handle-sustain-breath 1.6s ease-in-out infinite;
}

:where([data-spw-gesture="projecting"][data-spw-form="block"]) {
  transform: translate(calc(var(--drag-dx, 0px) * 0.02), calc(var(--drag-dy, 0px) * 0.02));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

/* Primed containment → cauldron tether (additive, inside gesture block).
   A charged/armed brace signals local value ready for gathering; the cauldron
   host and any primed ingredients receive a soft visual echo without new tokens. */
body:has([data-spw-gesture="armed"][data-spw-form="brace"]) [data-spw-cauldron],
body:has([data-spw-gesture="charging"][data-spw-form="brace"]) [data-spw-cauldron],
body:has([data-spw-gesture="sustained"][data-spw-form="brace"]) [data-spw-cauldron],
body:has([data-spw-gesture="armed"][data-spw-form="brace"]) [data-spw-cauldron-mirror],
body:has([data-spw-gesture="charging"][data-spw-form="brace"]) [data-spw-cauldron-mirror],
body:has([data-spw-gesture="sustained"][data-spw-form="brace"]) [data-spw-cauldron-mirror] {
  --cauldron-tether: color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  box-shadow: 0 0 0 1px var(--cauldron-tether);
}

.cauldron-ingredient[data-spw-ingredient-primed] {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 32%, var(--cauldron-chip-border));
}


}

/* /public/css/handles/operators/bias-and-phrases.css */
@layer handles {
/* ==========================================================================
   operators/bias-and-phrases.css — accent and inflection
   --------------------------------------------------------------------------
   Reads as: operator/substrate/role bias, inline delimiters, brace phrases, swappable hints
   Was: handles/operators.css §10–12 (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: data-spw-features, data-spw-gesture, data-spw-handle, data-spw-hint-density, data-spw-hint-surface, data-spw-inline-form, data-spw-operator, data-spw-role-cluster, data-spw-stance, data-spw-substrate, data-spw-swappable
   Genome — custom properties defined: 4; intent hooks consumed: none
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   10. Operator, substrate, role, and stance bias
   --------------------------------------------------------------------------
   This is where the file becomes more semantically integrated with the site.
   ========================================================================== */

:where([data-spw-features~="operators"] :where(main, footer) [data-spw-operator],
       [data-spw-features~="console"] .spw-console [data-spw-operator]) {
  color: var(--spw-operator-color, currentColor);
  border-color: var(--spw-operator-border, currentColor);
}

:where([data-spw-features~="operators"] :where(main, footer) [data-spw-operator]) {
  background: var(--spw-operator-bg-soft, transparent);
}

:where([data-spw-features~="operators"] :where(main, footer) [data-spw-operator]:is(:hover, :focus-visible)) {
  filter: brightness(1.04);
}

:where([data-spw-substrate]) {
  --handle-line:
    color-mix(in srgb, var(--spw-substrate-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--spw-substrate-bg-soft, var(--surface-strong)) 72%, transparent);
  --handle-ink:
    var(--spw-substrate-color, var(--active-op-color, var(--teal)));
}

:where([data-spw-role-cluster="reference"]) {
  --handle-line:
    color-mix(in srgb, var(--op-ref-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-ref-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-ref-color, var(--handle-ink));
}

:where([data-spw-role-cluster="schema"]) {
  --handle-line:
    color-mix(in srgb, var(--op-object-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-object-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-object-color, var(--handle-ink));
}

:where([data-spw-role-cluster="probe"]) {
  --handle-line:
    color-mix(in srgb, var(--op-probe-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-probe-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-probe-color, var(--handle-ink));
}

:where([data-spw-role-cluster="surface"]) {
  --handle-line:
    color-mix(in srgb, var(--op-surface-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-surface-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-surface-color, var(--handle-ink));
}

:where([data-spw-role-cluster="pragma"]) {
  --handle-line:
    color-mix(in srgb, var(--op-pragma-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-pragma-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-pragma-color, var(--handle-ink));
}

:where([data-spw-stance="entry"]) {
  --handle-underline-offset: 0.18em;
}

:where([data-spw-stance="ground"]) {
  --handle-underline-offset: 0.14em;
}

:where([data-spw-stance="exit"]) {
  opacity: 0.86;
}

/* ==========================================================================
   11. Inline delimiters and brace phrases
   ========================================================================== */

.spw-delimiter {
  padding-inline: 0.08rem;
  border-radius: 0.18rem;
  font-family: var(--handle-meta-font);
  font-weight: 700;
  cursor: help;
}

.spw-delimiter--angle {
  color: var(--op-concept-color, var(--op-surface-color, var(--teal)));
}

.spw-delimiter--circle {
  color: var(--op-scene-color, var(--op-ref-color, rgba(60, 40, 120, 0.82)));
}

.spw-delimiter--square {
  color: var(--op-mode-color, var(--op-probe-color, var(--teal)));
}

.spw-delimiter--brace {
  color: var(--op-direction-color, var(--op-frame-color, var(--teal)));
}

[data-spw-inline-form] {
  position: relative;
  display: inline;
  border-radius: 0.2rem;
  transition:
    background-color var(--handle-duration-fast) var(--handle-ease),
    color var(--handle-duration-fast) var(--handle-ease);
}

[data-spw-inline-form="brace"] {
  background: linear-gradient(
    180deg,
    transparent 72%,
    color-mix(in srgb, var(--op-direction-color, var(--op-frame-color, var(--teal))) 14%, transparent) 72%
  );
}

[data-spw-inline-form="angle"] {
  background: linear-gradient(
    180deg,
    transparent 72%,
    color-mix(in srgb, var(--op-concept-color, var(--op-surface-color, var(--teal))) 14%, transparent) 72%
  );
}

[data-spw-inline-form="square"] {
  background: linear-gradient(
    180deg,
    transparent 72%,
    color-mix(in srgb, var(--op-mode-color, var(--op-probe-color, var(--teal))) 14%, transparent) 72%
  );
}

[data-spw-inline-form="circle"] {
  background: linear-gradient(
    180deg,
    transparent 72%,
    color-mix(in srgb, var(--op-scene-color, var(--op-ref-color, rgba(60, 40, 120, 0.82))) 14%, transparent) 72%
  );
}

/* Children and sibling integration for inline learning surfaces. */
:where([data-spw-inline-form] > .spw-delimiter:first-child) {
  margin-inline-end: 0.04em;
}

:where([data-spw-inline-form] > .spw-delimiter:last-child) {
  margin-inline-start: 0.04em;
}

:where([data-spw-inline-form] + [data-spw-inline-form]) {
  margin-inline-start: 0.08em;
}

/* ==========================================================================
   12. Swappable affordance and roomy hints
   ========================================================================== */

:where([data-spw-swappable] .frame-sigil, [data-spw-swappable] .frame-card-sigil) {
  cursor: pointer;
}

:where([data-spw-swappable] .frame-sigil)::before {
  content: "";
  position: absolute;
  inset: auto 0 0.08rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--teal, #008080) 36%, transparent);
  opacity: 0.66;
}

:where([data-spw-gesture="charging"][data-spw-swappable] .frame-sigil)::before,
:where([data-spw-swappable] .frame-sigil:is(:hover, :focus-visible))::before {
  border-color: color-mix(in srgb, var(--teal, #008080) 72%, transparent);
  opacity: 1;
}

[data-spw-hint-surface] {
  display: none;
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-family: var(--handle-meta-font);
  font-size: 0.64rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

@container (min-width: 44rem) {
  [data-spw-hint-surface][data-spw-hint-density="roomy"] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
}

:where([data-spw-hint-surface] > [data-spw-handle="true"] + [data-spw-handle="true"]) {
  margin-inline-start: 0.1rem;
}


}

/* /public/css/handles/operators/spell-breadcrumbs.css */
@layer handles {
/* ==========================================================================
   operators/spell-breadcrumbs.css — the long spell path
   --------------------------------------------------------------------------
   Reads as: breadcrumb spellwork: a single subsystem, kept whole so its story reads uninterrupted
   Was: handles/operators.css §13 (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: aria-expanded, data-spw-breadcrumb-menu-changed, data-spw-breadcrumb-menu-clarity, data-spw-breadcrumb-menu-mode, data-spw-breadcrumb-menu-phase, data-spw-breadcrumb-menu-state, data-spw-breadcrumb-region-menu, data-spw-breadcrumb-reversible, data-spw-breadcrumb-state, data-spw-breadcrumb-viewport, data-spw-crumb-kind, data-spw-current, data-spw-deep-link, data-spw-operator-charge-role
   Genome — custom properties defined: 1; intent hooks consumed: none
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   13. Spell breadcrumbs
   ========================================================================== */

.spw-spell-path {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  position: relative;
  margin-block: 0.24rem 0.56rem;
  padding: 0.18rem 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--teal, #008080) 16%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--handle-meta-font);
  font-size: 0.72rem;
  contain: layout style;
  transition:
    color 120ms ease,
    opacity 120ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.spw-spell-path[data-spw-breadcrumb-state="open"] {
  padding: 0.18rem 0.24rem 0.22rem;
  border: 1px solid color-mix(in srgb, var(--teal, #008080) 10%, var(--line, rgba(14, 18, 20, 0.14)) 90%);
  border-radius: var(--shape-control, 0.78rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 52%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 96%, var(--teal, #008080) 4%);
}

:where(.site-header, body > header) .spw-spell-path {
  align-self: start;
  justify-self: stretch;
  margin-block: 0;
}

.spw-spell-path[data-spw-breadcrumb-reversible="true"] {
  box-shadow: none;
}

.spw-spell-path__header {
  display: flex;
  align-items: center;
  gap: 0.28rem 0.5rem;
  min-width: 0;
}

.spw-spell-path-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem 0.4rem;
  min-width: 0;
  min-height: var(--touch-target-compact, 2.15rem);
  padding: 0.12rem 0.28rem 0.12rem 0;
  border: 1px solid transparent;
  border-radius: var(--shape-control, 0.78rem);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--spw-interaction-commit, 180ms ease),
    border-color var(--spw-interaction-commit, 180ms ease),
    color var(--spw-interaction-commit, 180ms ease),
    transform var(--spw-interaction-acknowledge, 90ms ease),
    box-shadow var(--spw-interaction-commit, 180ms ease);
}

.spw-spell-path-toggle::after {
  content: "›";
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--teal, #008080) 58%, var(--ink-soft));
  font-size: 0.92rem;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform var(--spw-interaction-commit, 180ms var(--ease-chassis, ease));
}

.spw-spell-path-toggle[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}

.spw-spell-path-toggle:is(:hover, :focus-visible) {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  border-color: color-mix(in srgb, var(--teal, #008080) 18%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--teal, #008080) 8%);
  box-shadow: var(--spw-chassis-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.2));
  transform: translateY(var(--spw-control-hover-lift, -1px));
  outline: none;
}

.spw-spell-path-toggle:active {
  transform: translateY(var(--spw-control-press-depth, 1px)) scale(var(--spw-micro-press-scale, 0.998));
  transition:
    transform var(--spw-interaction-acknowledge, var(--touch-acknowledge, 90ms) var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1))),
    box-shadow var(--spw-interaction-acknowledge, var(--touch-acknowledge, 90ms) var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1)));
}

.spw-spell-path__title {
  color: var(--ink-soft);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spw-spell-path__summary {
  color: color-mix(in srgb, var(--ink-soft) 82%, var(--ink, rgba(14, 18, 20, 0.92)) 18%);
  font-size: 0.68rem;
  line-height: 1.2;
}

.spw-spell-shell {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
  transition:
    color 140ms ease,
    opacity 140ms ease;
}

.spw-spell-shell:is(:hover, :focus-visible) {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  outline: none;
}

.spw-spell-shell-token {
  color: var(--teal);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-spell-shell-state {
  color: var(--ink-soft);
  font-size: 0.64rem;
}

.spw-spell-sorter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: var(--touch-target-compact, 2.15rem);
  margin-inline-start: auto;
  padding: 0.18rem 0.52rem;
  border: 1px solid color-mix(in srgb, var(--op-action-color, #0d7a72) 28%, var(--line, rgba(14, 18, 20, 0.14)) 72%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 58%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 92%, var(--op-action-color, #0d7a72) 8%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}

.spw-spell-sorter-chip:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--op-action-color, #0d7a72) 46%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.spw-spell-sorter-chip:active {
  transform: translateY(0);
  background: color-mix(in srgb, var(--op-action-color, #0d7a72) 12%, var(--surface-strong, #fff) 88%);
}

.spw-spell-sorter-chip__label-short {
  display: none;
}

.spw-spell-sorter-chip__token {
  color: var(--op-action-color, #0d7a72);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.spw-spell-sorter-chip__label {
  color: var(--ink-soft);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
}

.spw-spell-crumb[data-spw-crumb-kind="region"] .spw-spell-token {
  color: var(--op-probe-color, #7c4dff);
}

.spw-spell-crumb[data-spw-crumb-kind="region"][data-spw-current="true"] .spw-spell-button {
  border-color: color-mix(in srgb, var(--op-probe-color, #7c4dff) 42%, transparent);
  background: color-mix(in srgb, var(--op-probe-color, #7c4dff) 10%, var(--surface-strong, #fff) 90%);
}

.spw-spell-path[data-spw-breadcrumb-region-menu="open"] .spw-spell-crumb[data-spw-crumb-kind="region"] .spw-spell-label {
  color: var(--ink, rgba(14, 18, 20, 0.92));
}

.spw-spell-path__hint {
  display: none;
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.64));
  font-size: 0.62rem;
  line-height: 1.35;
}

.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__hint {
  display: block;
  padding-inline: 0.12rem 0;
}

.spw-spell-button,
.spw-spell-link,
.spw-spell-shell {
  touch-action: manipulation;
}

.spw-spell-button:active,
.spw-spell-sorter-chip:active {
  opacity: 0.92;
}

.spw-spell-trail {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.3rem 0.36rem;
  list-style: none;
  margin: 0;
  padding: 0.08rem 0.12rem 0.12rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  mask-image: linear-gradient(90deg, transparent, #000 0.65rem, #000 calc(100% - 0.65rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.65rem, #000 calc(100% - 0.65rem), transparent);
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  overflow-x: visible;
  overflow-y: visible;
  overscroll-behavior: auto;
  scroll-snap-type: none;
  mask-image: none;
  -webkit-mask-image: none;
  touch-action: pan-y;
  gap: 0.28rem 0.32rem;
  padding: 0.12rem 0.04rem 0.16rem;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-crumb {
  flex: 0 1 auto;
  max-inline-size: 100%;
  scroll-snap-align: none;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-crumb:not(:last-child)::after {
  margin-inline-start: 0.1rem;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-path__header {
  flex-wrap: wrap;
  row-gap: 0.22rem;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-path-toggle {
  flex: 1 1 min(100%, 14rem);
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-sorter-chip {
  margin-inline-start: 0;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-sorter-chip__label {
  display: none;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-sorter-chip__label-short {
  display: inline;
}

.spw-spell-path__guide {
  display: flex;
  flex-wrap: wrap;
  gap: 0.16rem 0.34rem;
  align-items: baseline;
  margin: 0.06rem 0 0;
  color: var(--ink-soft);
  font-size: 0.64rem;
  line-height: 1.35;
}

.spw-spell-path__guide-lead,
.spw-spell-path__guide-action {
  min-width: 0;
}

.spw-spell-path__guide-action {
  color: var(--ink);
}

.spw-spell-path__guide-details {
  color: var(--ink-soft);
  opacity: 0.88;
}

.spw-spell-neighborhood {
  display: grid;
  gap: 0.22rem;
  margin: 0.06rem 0 0;
}

.spw-spell-neighborhood__label {
  color: var(--ink-soft);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spw-spell-neighborhood__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.34rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.spw-spell-neighborhood__item {
  min-width: 0;
}

.spw-spell-neighborhood__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.18rem 0.28rem;
  min-height: 1.84rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--teal, #008080) 8%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  text-decoration: none;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.spw-spell-neighborhood__link:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--teal, #008080) 24%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, var(--teal, #008080) 12%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  outline: none;
  transform: translateY(-1px);
}

.spw-spell-neighborhood__name {
  color: var(--teal);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.spw-spell-neighborhood__note {
  color: var(--ink-soft);
  font-size: 0.6rem;
  line-height: 1.25;
}

.spw-spell-crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-width: 0;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.spw-spell-crumb:not(:last-child)::after {
  content: "→";
  margin-inline-start: 0.18rem;
  color: var(--line-strong);
  opacity: 0.72;
}

.spw-spell-link,
.spw-spell-button {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-height: max(2.05rem, var(--spw-control-min-height, 2.15rem));
  min-width: 0;
  padding: calc(var(--spw-control-padding-block, 0.22rem) + 0.02rem) calc(var(--spw-control-padding-inline, 0.48rem) - 0.04rem);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font: inherit;
  text-decoration: none;
  contain: paint style;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.spw-spell-link:is(:hover, :focus-visible),
.spw-spell-button:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--semantic-accent, var(--active-op-color, var(--teal, #008080))) 18%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, var(--semantic-accent, var(--active-op-color, var(--teal, #008080))) 6%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  outline: none;
  transform: translateY(-1px);
}

.spw-spell-crumb[data-spw-current="true"] .spw-spell-link,
.spw-spell-crumb[data-spw-current="true"] .spw-spell-button {
  border-color: color-mix(in srgb, var(--semantic-accent-emphasis, var(--semantic-accent, var(--active-op-color, var(--teal, #008080)))) 22%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--semantic-accent-emphasis, var(--semantic-accent, var(--active-op-color, var(--teal, #008080)))) 8%);
}

.spw-spell-token {
  color: var(--semantic-accent, var(--active-op-color, var(--teal, #008080)));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.spw-spell-label {
  min-width: 0;
  color: var(--ink);
  text-wrap: nowrap;
}

.spw-spell-meaning {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.66rem;
  line-height: 1.45;
}

.spell-register-strip--effects .spell-register {
  border-color: color-mix(in srgb, var(--teal, #008080) 22%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, var(--teal, #008080) 10%);
}

.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-trail,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-meaning,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__guide,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-neighborhood,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__inspect,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__garden-trace {
  display: none;
}

.spw-spell-path[data-spw-breadcrumb-state="open"] .spw-spell-path__hint {
  display: none;
}

.spw-spell-path__inspect {
  margin: 0.08rem 0 0;
  color: var(--ink-soft);
  font-size: 0.64rem;
  line-height: 1.4;
}

.spw-spell-path__inspect > summary {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.08rem 0.2rem;
  color: color-mix(in srgb, var(--ink-soft) 82%, var(--teal, #008080) 18%);
  cursor: pointer;
  list-style: none;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spw-spell-path__inspect > summary::-webkit-details-marker {
  display: none;
}

.spw-spell-path__inspect > summary::before {
  content: "›";
  margin-inline-end: 0.28rem;
  color: color-mix(in srgb, var(--teal, #008080) 58%, var(--ink-soft));
}

.spw-spell-path__inspect[open] > summary::before {
  transform: rotate(90deg);
}

.spw-spell-path__inspect .spw-spell-meaning {
  margin: 0.2rem 0 0;
  padding: 0.34rem 0.42rem;
  border: 1px dashed color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 88%, transparent);
  border-radius: var(--shape-small, 0.55rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, transparent);
}

.spw-spell-neighborhood__note {
  display: none;
}

.spw-spell-path__garden-trace {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.38rem;
  margin: 0.12rem 0 0;
  padding: 0.2rem 0.46rem;
  border: 1px solid color-mix(in srgb, var(--teal, #008080) 14%, var(--line, rgba(14, 18, 20, 0.14)) 86%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--teal, #008080) 8%);
  font-size: 0.64rem;
}

.spell-provenance__label {
  color: color-mix(in srgb, var(--teal, #008080) 68%, var(--ink-soft));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-spell-path__guide-lead {
  color: color-mix(in srgb, var(--ink-soft) 78%, var(--ink, rgba(14, 18, 20, 0.92)) 22%);
  font-size: 0.66rem;
  line-height: 1.38;
}

@keyframes spw-breadcrumb-shell-project {
  0% {
    opacity: 0.86;
    transform: translateY(-0.06rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spw-breadcrumb-shell-settle {
  0% {
    opacity: 0.9;
    transform: translateY(0.04rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spw-breadcrumb-copy-clarify {
  0% {
    opacity: 0.82;
    transform: translateY(-0.04rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The breadcrumb and shell expose the same settle/open physics as the header. */
.spw-spell-path[data-spw-breadcrumb-menu-state="open"] {
  color: color-mix(in srgb, var(--ink-soft) 76%, var(--ink, rgba(14, 18, 20, 0.92)) 24%);
}

.spw-spell-path[data-spw-breadcrumb-menu-clarity="project"] {
  animation: spw-breadcrumb-shell-project 120ms ease-out;
}

.spw-spell-path[data-spw-breadcrumb-menu-clarity="settle"] {
  animation: spw-breadcrumb-shell-settle 100ms ease-out;
}

.spw-spell-path[data-spw-breadcrumb-menu-state="open"] .spw-spell-shell {
  color: var(--ink, rgba(14, 18, 20, 0.92));
}

.spw-spell-path[data-spw-breadcrumb-menu-state="closed"][data-spw-breadcrumb-reversible="true"] {
  border-style: solid;
}

.spw-spell-path[data-spw-breadcrumb-menu-phase="settling"][data-spw-breadcrumb-reversible="true"] .spw-spell-shell-state,
.spw-spell-path[data-spw-breadcrumb-menu-mode="toggle"][data-spw-breadcrumb-reversible="true"] .spw-spell-shell-state {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.16rem;
}

.spw-spell-path[data-spw-breadcrumb-menu-changed~="state"] .spw-spell-shell,
.spw-spell-path[data-spw-breadcrumb-menu-changed~="mode"] .spw-spell-shell,
.spw-spell-path[data-spw-breadcrumb-menu-changed~="phase"] .spw-spell-meaning {
  animation: spw-breadcrumb-copy-clarify 100ms ease-out;
}

@media (max-width: 720px) {
  :where(.site-header, body > header) .spw-spell-path {
    width: 100%;
    margin-block: 0;
  }

  .spw-spell-path {
    gap: 0.12rem;
    margin-block: 0.08rem 0.18rem;
    padding: 0.12rem 0 0;
  }

  .spw-spell-path__header {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.32rem;
  }

  .spw-spell-path-toggle {
    flex: 1 1 auto;
    min-width: 0;
  }

  .spw-spell-path__summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .spw-spell-path__guide,
  .spw-spell-neighborhood {
    display: none;
  }

  .spw-spell-sorter-chip__label-full {
    display: none;
  }

  .spw-spell-sorter-chip__label-short {
    display: inline;
  }

  .spw-spell-path[data-spw-breadcrumb-state="closed"] {
    padding-block: 0.08rem 0;
  }

  .spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-shell {
    min-height: auto;
    padding: 0;
  }

  .spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-shell-state {
    display: none;
  }
}

.spell-visual {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.48rem;
  align-items: center;
  min-width: 0;
}

.spell-board-content {
  display: grid;
  gap: 0.75rem;
}

.spell-visual--compact {
  gap: 0.3rem 0.36rem;
}

.spell-ingredient {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 0.08rem;
  min-height: 2rem;
  padding: 0.26rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--teal, #008080) 20%, transparent);
  border-radius: 0.42rem;
  background: color-mix(in srgb, var(--surface-strong, #fff) 96%, transparent);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.76rem;
  line-height: 1.1;
}

.spell-ingredient[data-spw-operator-left-role],
.spell-ingredient[data-spw-operator-right-role] {
  --spell-geometry-rail: color-mix(in srgb, var(--active-op-color, var(--teal)) 20%, transparent);

  box-shadow:
    inset 2px 0 0 var(--spell-geometry-rail),
    inset -2px 0 0 color-mix(in srgb, var(--op-ref-color, #4f7fbf) 18%, transparent);
}

.spell-ingredient[data-spw-operator-flow*="subjective-to-objective"] {
  --spell-geometry-rail: color-mix(in srgb, var(--op-action-color, var(--teal-dark)) 22%, transparent);
}

.spell-ingredient[data-spw-operator-flow*="objective-to-subjective"] {
  --spell-geometry-rail: color-mix(in srgb, var(--op-probe-color, #7a57c2) 22%, transparent);
}

.spell-ingredient[data-spw-operator-charge-role*="ordinal"] {
  border-style: double;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--op-object-color, #c48a28) 9%, transparent),
      transparent 44%,
      color-mix(in srgb, var(--op-object-color, #c48a28) 7%, transparent)
    ),
    color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent);
}

.spell-ingredient[data-spw-deep-link*="#"] {
  border-bottom-color: color-mix(in srgb, var(--op-ref-color, #4f7fbf) 38%, transparent);
}

.spell-ingredient-prefix,
.spell-ingredient-postfix {
  color: var(--teal, #008080);
  font-weight: 700;
}

.spell-ingredient-nucleus {
  color: var(--ink, rgba(14, 18, 20, 0.92));
}

.spell-ledger {
  display: grid;
  gap: 0.55rem;
}

.spell-register-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem 0.42rem;
  min-width: 0;
}

.spell-register {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  padding: 0.16rem 0.46rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 74%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
}

.spell-note {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-size: 0.8rem;
  line-height: 1.55;
}

.spell-source {
  margin: 0;
  padding: 0.72rem 0.84rem;
  border-radius: 0.48rem;
  background: color-mix(in srgb, var(--surface-code, rgba(18, 23, 30, 0.94)) 90%, transparent);
  color: color-mix(in srgb, white 90%, var(--teal, #008080) 10%);
  overflow: auto;
}

.spell-source code {
  display: block;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.74rem;
  line-height: 1.6;
}

.spell-source--compact {
  max-block-size: 12rem;
  padding: 0.56rem 0.68rem;
}

.spell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.spell-actions--bundles {
  margin-top: 0.1rem;
}

.spell-bundle-bank {
  display: grid;
  gap: 0.7rem;
}

.spell-bundle-grid {
  display: grid;
  gap: 0.65rem;
}

.spell-bundle-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.72rem 0.84rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 78%, transparent);
  border-radius: 0.56rem;
  background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
}

.spell-bundle-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
}

.spell-bundle-card__title {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: 0.82rem;
}

.spell-bundle-card__meta {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-size: 0.74rem;
  line-height: 1.5;
}


}

/* /public/css/handles/operators/metrics-and-cognition.css */
@layer handles {
/* ==========================================================================
   operators/metrics-and-cognition.css — instruments that measure
   --------------------------------------------------------------------------
   Reads as: frame metrics, guided/cognitive handles, and the resonance seam
   Was: handles/operators.css §14–16 (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: data-spw-cognitive-handles, data-spw-features, data-spw-guided, data-spw-liminality, data-spw-metric-kind, data-spw-show-semantic-metadata, data-state
   Genome — custom properties defined: 0; intent hooks consumed: none
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   14. Frame metrics
   ========================================================================== */

:where([data-spw-features~="metrics"] .frame-metrics-bar) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin-top: 0.15rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 0.76rem;
  opacity: 0.68;
  transition:
    opacity var(--handle-duration-base) var(--handle-settle-ease),
    color var(--handle-duration-fast) var(--handle-ease);
}

:where([data-spw-features~="metrics"] .site-frame[data-state~="active"] .frame-metrics-bar,
       [data-spw-features~="metrics"] .frame-metrics-bar:hover) {
  opacity: 1;
}

.frame-metrics-label {
  flex-shrink: 0;
  color: var(--teal);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-spw-metric-kind] {
  padding: 0.1rem 0.36rem;
  border-radius: var(--handle-radius-pill);
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}

/* Sibling metric seams read as grouped data instead of isolated pills. */
:where([data-spw-metric-kind] + [data-spw-metric-kind]) {
  margin-inline-start: -0.12rem;
}

/* ==========================================================================
   15. Guided / cognitive handles
   --------------------------------------------------------------------------
   Makes semantic instruction legible without requiring dedicated panels.
   ========================================================================== */

/* Guiding should only style component-family containers, not arbitrary nodes. */
:where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"] {
  box-shadow: var(--handle-shadow-guided);
  background-image:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--spw-substrate-bg-soft, transparent) 38%, transparent),
      transparent 52%
    );
}

/* Guided threshold states should read as an earned seam, not a generic highlight. */
:where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"][data-spw-liminality="threshold"] {
  border-color: color-mix(in srgb, var(--spw-substrate-color, var(--teal)) 34%, var(--handle-line-soft));
}

html[data-spw-show-semantic-metadata="on"] :where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"] > .spw-component-guides,
html[data-spw-show-semantic-metadata="on"] :where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"] > .spw-semantic-seam > .spw-component-guides {
  display: inline-flex;
}

html[data-spw-cognitive-handles="off"] :is(.spw-smart-console-host, .cognitive-surface-panel) {
  display: none !important;
}

html[data-spw-cognitive-handles="off"] :where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"] {
  box-shadow: none;
  background-image: none;
}

/* ==========================================================================
   16. Resonance seam
   ========================================================================== */

.resonance-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  color: var(--active-op-color, var(--teal));
  font-weight: 700;
}

.resonance-sigil {
  font-size: 0.8rem;
  font-family: var(--handle-meta-font);
  opacity: 0.72;
}


}

/* /public/css/handles/operators/adaptive.css */
@layer handles {
/* ==========================================================================
   operators/adaptive.css — the room changes, the handles adapt
   --------------------------------------------------------------------------
   Reads as: responsive alignment and reduced-motion collapse for every chapter before this one
   Was: handles/operators.css §17–18 (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: data-spw-breadcrumb-state, data-spw-breadcrumb-viewport, data-spw-cauldron, data-spw-charge-key, data-spw-concept, data-spw-form, data-spw-garden-provenance, data-spw-inline-form, data-spw-menu, data-spw-menu-mode, data-spw-mirror-label, data-spw-numericity-emphasis, data-spw-show-semantic-metadata, data-spw-slot
   Genome — custom properties defined: 1; intent hooks consumed: none
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   17. Responsive alignment
   ========================================================================== */

@container (max-width: 38rem) {
  :where(.frame-topline, .frame-heading) {
    align-items: stretch;
  }

  :where(.frame-topline > .spec-strip,
         .frame-topline > .frame-operators,
         .frame-topline > .spw-component-meta,
         .frame-heading > .spw-component-meta) {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  :where(.frame-operators > *, .spec-strip > *, .spw-component-meta > *) {
    flex: 0 1 auto;
  }
}

@media (max-width: 600px) {
  .operator-chip {
    min-height: var(--spw-control-min-height, 2.02rem);
    padding: var(--spw-control-padding-block, 0.2rem) var(--spw-control-padding-inline, 0.6rem);
  }

  .mode-switch .frame-sigil {
    min-height: calc(var(--spw-control-min-height, 2.02rem) - 0.06rem);
    padding-inline: var(--spw-control-padding-inline, 0.6rem);
  }

  .spw-component-tag,
  .spw-guide-chip {
    max-inline-size: 100%;
    padding: 0.17rem 0.42rem;
    font-size: calc(var(--semantic-metadata-font-size, 0.58rem) + 0.01rem);
    letter-spacing: calc(var(--semantic-metadata-tracking, 0.04em) * 0.88);
  }
}

@media (max-width: 720px) {
  html[data-spw-show-semantic-metadata="on"] .spw-component-guides {
    display: none !important;
  }

  :where(.frame-topline, .frame-heading) {
    align-items: stretch;
    gap: calc(var(--spw-slot-gap-tight, 0.45rem) + 0.04rem);
  }

  :where(
    .frame-topline > .spw-component-meta,
    .frame-heading > .spw-component-meta,
    .frame-topline > .spec-strip,
    .frame-topline > .frame-operators
  ) {
    width: 100%;
    margin-left: 0;
    margin-inline-start: 0;
    justify-content: flex-start;
  }

  :where(.frame-topline > .spw-component-meta > :nth-child(n + 2),
         .frame-heading > .spw-component-meta > :nth-child(n + 2),
         .spw-semantic-seam > .spw-component-meta > :nth-child(n + 2)) {
    display: none;
  }
}

@media (max-width: 32rem) {
  :where(.frame-topline, .frame-heading) {
    flex-direction: column;
    align-items: stretch;
  }

  :where(.frame-heading > :is(h1, h2, h3)) {
    flex: 0 1 auto;
    max-inline-size: 100%;
  }

  :where(.frame-topline > [data-spw-slot="meta"], .frame-heading > [data-spw-slot="meta"]) {
    order: 1;
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }

  :where(.frame-topline > .frame-prompt-copy, .frame-heading > .frame-prompt-copy) {
    order: 2;
    align-self: flex-start;
    margin-block-start: 0;
  }

  :where(.frame-topline > .frame-sigil, .frame-heading > .frame-sigil, .frame-topline > .spw-delimiter) {
    align-self: flex-start;
  }
}

/* ==========================================================================
   18. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where(
    .operator-chip,
    .syntax-token,
    .spec-pill,
    .badge,
    .tag,
    .pill,
    .frame-sigil,
    .frame-card-sigil,
    .spw-delimiter,
    .spw-component-tag,
    .spw-guide-chip,
    .persona-chip,
    [data-spw-form],
    [data-spw-charge-key],
    [data-spw-inline-form],
    .spw-spell-path,
    .spw-spell-shell,
    .spw-spell-link,
    .spw-spell-button,
    .spw-spell-meaning,
    .frame-metrics-bar
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Pronunciation Hints */
.spw-pronunciation-hint {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.spw-pronunciation-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.spw-pronunciation-hint__inner {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 28%, transparent);
  border-radius: var(--handle-radius-tight);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  white-space: nowrap;
}

.spw-pronunciation-hint__pronunciation {
  color: var(--active-op-color, var(--teal));
  font-family: var(--handle-meta-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-pronunciation-hint__mnemonic {
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.2;
}

/* Garden-tended disclosures and living terms (Patch 007)
   — cozy, inspectable, gesture-aware markers for the four core practices.
   Uses existing projection lifts, operator colors, and wonder effects. */
.spw-garden-tended {
  border-left: 2px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, var(--handle-line-soft, rgba(0,0,0,0.12)) 82%);
  background: color-mix(in srgb, var(--surface-strong, #fff) 97%, var(--active-op-color, var(--teal)) 3%);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.5);
}

.spw-living-term {
  border-bottom: 1px dotted color-mix(in srgb, var(--active-op-color, var(--teal)) 35%, transparent);
  cursor: default;
  position: relative;
  transition: border-color var(--handle-duration-fast, 140ms) var(--handle-ease);
}

/* Make gestureability easy to discover even when idle — subtle garden marker that only appears on interaction or focus */
.spw-living-term::after {
  content: "✧";
  position: absolute;
  right: -0.45em; /* tighter to reduce line-box pressure and wrapping artifacts at end of balanced text */
  top: -0.08em;
  font-size: 0.52em;
  color: color-mix(in srgb, var(--active-op-color, var(--teal)) 25%, transparent);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 120ms ease, color 120ms ease;
}

.spw-living-term:hover::after,
.spw-living-term:focus-visible::after {
  opacity: 0.85;
  color: var(--active-op-color, var(--teal));
}

.spw-living-term:hover,
.spw-living-term:focus-visible {
  border-bottom-color: var(--active-op-color, var(--teal));
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 6%, transparent);
}

.spw-living-term[tabindex="0"]:focus-visible {
  outline: 1px solid var(--active-op-color, var(--teal));
  outline-offset: 2px;
}

/* Numericity emphasis mode — makes rhythm numbers easy to discover and interact with.
   The baker's dozen (13-modulo) specifics are an easter egg: they surface in quantifiers, tooltips, and cauldron outputs when the mode is prominent or cauldron-first, or when you hold living-terms. Keeps the motif delightful for those who engage the system rather than announced in prose. */
html[data-spw-numericity-emphasis="prominent"] .spw-living-term[data-spw-concept*="day"],
html[data-spw-numericity-emphasis="prominent"] .spw-living-term[data-spw-concept*="step"],
html[data-spw-numericity-emphasis="prominent"] .spw-living-term[data-spw-concept*="trace"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="day"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="step"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="trace"] {
  font-weight: 600;
  border-bottom-width: 2px;
  --spw-numericity-lift: var(--spw-numericity-emphasis-factor, 1.35);
}

html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="day"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="step"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="trace"] {
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent);
}

/* Garden consequence live strip (home inspector + KERNEL ENTRY carry surface)
   — the direct answer to "are the consequences meaningfully visible with effects that maintain temporal momentum?"
   Reuses cauldron-tether, garden-tended, and gesture state inheritance. Lives in handles layer. */
.garden-consequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-block-start: 0.35rem;
  padding-block-start: 0.35rem;
  border-top: 1px dotted color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--ink-soft, rgba(27, 31, 35, 0.68)) 70%, var(--active-op-color, var(--teal)) 30%);
}

.garden-consequence__label {
  font-weight: 720;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.garden-consequence [data-spw-mirror-label] {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.08rem 0.38rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent);
  font-size: 0.65rem;
  white-space: nowrap;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garden-consequence .garden-trail[data-spw-mirror-label="trail"] {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 28%, transparent);
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 6%, transparent);
}

.garden-action {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 22%, transparent);
  background: transparent;
  color: var(--active-op-color, var(--teal));
  font-family: inherit;
  font-size: 0.64rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.garden-action:hover,
.garden-action:focus-visible {
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent);
  border-color: var(--active-op-color, var(--teal));
}

/* The KERNEL ENTRY carry surface — makes the prose promise of "gestures can be carried" have a live, traversable consequence */
.garden-carried {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28rem 0.42rem;
  margin-block-start: 0.35rem;
  padding: 0.38rem 0.52rem;
  border: 1px dotted color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent);
  border-radius: var(--shape-component, 6px);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--active-op-color, var(--teal)) 8%);
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ink-soft, rgba(27, 31, 35, 0.68)) 78%, var(--active-op-color, var(--teal)) 22%);
  transition:
      border-color 180ms ease,
      background-color 180ms ease;
}

.garden-carried:has(.garden-carried__value:not(:empty):not(:-moz-only-whitespace)) {
  border-style: solid;
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 24%, transparent);
}

.garden-carried:has(.garden-carried__value:not(:empty)) {
  border-style: solid;
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 24%, transparent);
}

.garden-carried__label {
  opacity: 0.82;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.garden-carried__value {
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--active-op-color, var(--teal)) 30%, transparent);
  transition: border-color 180ms ease, color 180ms ease;
}

.garden-carried__value:not(:empty):not(:-moz-only-whitespace) {
  color: color-mix(in srgb, var(--active-op-color, var(--teal)) 78%, var(--ink, #1b1f23) 22%);
  border-bottom-style: solid;
}

/* When a re-gather happens, the footer cauldron receives a short "still warm" flash via the JS class */
.site-footer__cauldron.is-recently-tended,
[data-spw-cauldron].is-recently-tended {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 35%, transparent),
              0 0 0 3px color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent);
  transition: box-shadow 200ms ease;
}

/* Spell provenance + garden trace on spell paths and atoms (direct "enhance spells similarly" continuation).
   Cohesive with the Garden State mirror and garden-consequence styles. Lives in handles layer. */
.spell-capability-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  align-items: center;
  min-inline-size: 0;
}

.spell-capability {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.22rem;
  max-inline-size: 100%;
  min-block-size: 1.45rem;
  padding: 0.14rem 0.38rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, var(--line, rgba(14,18,20,0.14)));
  border-radius: var(--shape-component, 6px);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--active-op-color, var(--teal)) 8%);
  color: color-mix(in srgb, var(--ink-soft, rgba(27, 31, 35, 0.68)) 82%, var(--active-op-color, var(--teal)) 18%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  line-height: 1.12;
}

.spell-capability__label {
  color: color-mix(in srgb, var(--active-op-color, var(--teal)) 68%, var(--ink, #1b1f23) 32%);
  font-weight: 800;
  text-transform: uppercase;
}

.spell-capability__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spw-spell-dock .spell-capability {
  font-size: 0.58rem;
}

@media (max-width: 720px) {
  .spell-capability {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.04rem;
  }

  .spell-capability__value {
    white-space: normal;
  }
}

.spell-provenance,
.cauldron-garden-provenance,
.spw-spell-path__garden-trace {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
  margin-block-start: 0.3rem;
  padding-block-start: 0.3rem;
  border-top: 1px dotted color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--ink-soft, rgba(27, 31, 35, 0.68)) 72%, var(--active-op-color, var(--teal)) 28%);
}

.spell-provenance__label,
.cauldron-garden-provenance .spell-provenance__label {
  font-weight: 720;
  letter-spacing: 0.02em;
  opacity: 0.82;
}

.spell-provenance__trace,
.spell-provenance__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.06rem 0.32rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 95%, transparent);
  font-size: 0.63rem;
  white-space: nowrap;
}

.spell-provenance__chip {
  padding: 0 0.18rem;
  font-size: 0.58rem;
  opacity: 0.7;
}

.spell-provenance .garden-action,
.spell-provenance .spell-action {
  font-size: 0.62rem;
  padding: 0.08rem 0.36rem;
}

/* When a spell atom itself carries provenance (from garden mix or planted trail) */
.spell-ingredient[data-spw-garden-provenance] {
  border-bottom-style: dashed;
  border-bottom-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 30%, transparent);
  position: relative;
}

.spw-spell-path__garden-trace {
  margin-block-start: 0.2rem;
  font-size: 0.64rem;
}

@media (max-width: 720px) {
  :is(.site-header, body > header)[data-spw-menu-mode="toggle"]
    .spw-spell-path[data-spw-breadcrumb-viewport="compact"]
    .spw-spell-path__header {
    flex-wrap: nowrap;
  }

  :is(.site-header, body > header)[data-spw-menu-mode="toggle"]
    .spw-spell-path[data-spw-breadcrumb-viewport="compact"][data-spw-breadcrumb-state="closed"] {
    gap: 0;
    padding-block: 0;
  }

  :is(.site-header, body > header)[data-spw-menu-mode="toggle"]
    .spw-spell-path[data-spw-breadcrumb-viewport="compact"][data-spw-breadcrumb-state="closed"]
    :is(.spw-spell-sorter-chip, .spw-spell-path__hint, .spw-spell-path__garden-trace) {
    display: none;
  }

  :is(.site-header, body > header)[data-spw-menu-mode="toggle"][data-spw-menu="open"]
    .spw-spell-path,
  :is(.site-header, body > header)[data-spw-menu-mode="toggle"][data-spw-menu="open"]
    .spw-header-trace {
    display: none;
  }
}


}

/* /public/css/handles/operators/geometry-projection.css */
@layer handles {
/* ==========================================================================
   operators/geometry-projection.css — physics made visible
   --------------------------------------------------------------------------
   Reads as: data-spw-operator-geometry projected onto surfaces; aligns with shared.js OPERATOR_GEOMETRY
   Was: handles/operators.css tail (split 2026-07-03, rule order preserved verbatim)
   Genome — states sensed: data-spw-address-role, data-spw-gesture, data-spw-interaction-contract, data-spw-loading-ecology-phase, data-spw-loading-ecology-twinkle, data-spw-loop-state, data-spw-operator, data-spw-operator-brace-bias, data-spw-operator-geometry, data-spw-perspective, data-spw-reduce-motion, data-spw-sigil-payload-scope, data-spw-sigil-region-tempo, data-spw-sigil-role
   Genome — custom properties defined: 13; intent hooks consumed: none
   Probe: toggle me wholesale in DevTools > Sources, or set
   html[data-spw-debug-layers="on"] to see layer owners breathe.
   ========================================================================== */

/* ==========================================================================
   Operator geometry projection
   --------------------------------------------------------------------------
   Maps semantic physics from data-spw-operator-geometry onto handle surfaces.
   Geometry names align with shared.js OPERATOR_GEOMETRY and spell rendering.
   ========================================================================== */

:where([data-spw-operator-geometry="anchor"]) {
  --spw-geometry-stability: 1;
  --spw-geometry-motion: 0;
}

:where([data-spw-operator-geometry="field-plane"]) {
  --spw-geometry-stability: 0.72;
  --spw-geometry-motion: 0.18;
}

:where([data-spw-operator-geometry="frequency-anchor"]) {
  --spw-geometry-stability: 0.82;
  --spw-geometry-motion: 0.24;
}

:where([data-spw-operator-geometry="aperture"]) {
  --spw-geometry-stability: 0.45;
  --spw-geometry-motion: 0.42;
}

:where([data-spw-operator-geometry="lift"]) {
  --spw-geometry-stability: 0.64;
  --spw-geometry-motion: 0.28;
}

:where([data-spw-operator-geometry="mass"]) {
  --spw-geometry-stability: 0.9;
  --spw-geometry-motion: 0.08;
}

:where([data-spw-operator-geometry="brace-container"]) {
  --spw-geometry-stability: 0.78;
  --spw-geometry-motion: 0.12;
}

:where([data-spw-operator-geometry]) {
  transition:
    box-shadow calc(160ms + (80ms * var(--spw-geometry-motion, 0.2))) ease,
    transform calc(160ms + (80ms * var(--spw-geometry-motion, 0.2))) ease;
}

:where(
  [data-spw-operator-geometry]:is(:hover, :focus-visible),
  [data-spw-operator-geometry][data-spw-gesture="charging"]
) {
  box-shadow:
    0 0 0 calc(1px * var(--spw-geometry-stability, 0.6))
      color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 34%, transparent),
    0 calc(4px * var(--spw-geometry-motion, 0.2)) calc(14px * var(--spw-geometry-stability, 0.6))
      color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 12%, transparent);
}

:where([data-spw-operator-brace-bias="objective"]) {
  --spw-brace-wash: var(--objective-brace-wash, color-mix(in srgb, var(--teal, #008080) 10%, transparent));
}

:where([data-spw-operator-brace-bias="subjective"]) {
  --spw-brace-wash: var(--subjective-brace-wash, color-mix(in srgb, var(--amber, #d4a017) 10%, transparent));
}

:where([data-spw-operator-brace-bias="objective-to-subjective"]) {
  --spw-brace-wash: color-mix(
    in srgb,
    var(--objective-brace-wash, color-mix(in srgb, var(--teal, #008080) 10%, transparent)) 50%,
    var(--subjective-brace-wash, color-mix(in srgb, var(--amber, #d4a017) 10%, transparent)) 50%
  );
}

:where([data-spw-perspective="objective"].spw-delimiter) {
  --spw-operator-color: var(--teal, #008080);
}

:where([data-spw-perspective="subjective"].spw-delimiter) {
  --spw-operator-color: var(--amber, #d4a017);
}

:where([data-spw-interaction-contract]) {
  transition:
    box-shadow calc(160ms + (80ms * var(--spw-geometry-motion, 0.2))) ease,
    transform calc(160ms + (80ms * var(--spw-geometry-motion, 0.2))) ease,
    color 160ms ease;
}

:where(
  [data-spw-interaction-contract]:is(:hover, :focus-visible),
  [data-spw-interaction-contract][data-spw-loop-state="preview"]
) {
  box-shadow:
    0 0 0 calc(1px * var(--spw-geometry-stability, 0.6))
      color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 28%, transparent);
}

/* Loading ecology twinkle — beat-aligned operator salience during settle windows. */
@keyframes spw-ecology-twinkle {
  0%, 100% {
    opacity: 1;
    filter: saturate(1);
  }

  50% {
    opacity: calc(0.86 + (var(--spw-ecology-twinkle, 0) * 0.1));
    filter: saturate(calc(1 + (var(--spw-ecology-twinkle, 0) * 0.08)));
  }
}

:where(html[data-spw-loading-ecology-twinkle="true"]:not([data-spw-reduce-motion="on"])) :where(
  .operator-chip,
  .syntax-token,
  [data-spw-operator],
  [data-spw-interaction-contract]
) {
  animation: spw-ecology-twinkle
    calc(var(--spw-ecology-twinkle-duration, 760ms) / var(--spw-site-rhythm-tempo, 1))
    var(--ease-settle, ease)
    1;
  animation-delay: calc(var(--spw-settle-stagger-step, 18ms) * var(--spw-ecology-beat-align, 0));
}

:where(html[data-spw-loading-ecology-phase="measuring"]) :where(
  [data-spw-interaction-contract],
  .operator-chip[href]
) {
  --spw-geometry-stability: calc(0.6 + (var(--spw-loading-ecology-surface, 0) * 0.12));
}

/* Payload-aware sigil transitions
   JS writes page + nearest-region payload keys while a sigil is approached,
   focused, or committed. The visual spend stays local to the token. */
:where(
  .frame-sigil,
  .frame-card-sigil,
  .frame-panel-sigil,
  .syntax-token,
  .operator-chip,
  .spec-pill,
  .header-sigil,
  .site-footer__brand
)[data-spw-sigil-transition] {
  --spw-sigil-payload-color: var(--spw-operator-color, var(--active-op-color, var(--teal, #008080)));
  --spw-sigil-transition-duration: var(--handle-duration-fast, 140ms);
  --spw-sigil-payload-alpha: 22%;
  --spw-sigil-payload-outline: 0px;
  --spw-sigil-payload-outline-offset: 0px;
  --spw-sigil-payload-lift: 0px;
  --spw-sigil-payload-scale: 1;
  --spw-sigil-saturate: 1;
  --spw-sigil-brightness: 1;
  outline: var(--spw-sigil-payload-outline) solid
    color-mix(in srgb, var(--spw-sigil-payload-color) var(--spw-sigil-payload-alpha), transparent);
  outline-offset: var(--spw-sigil-payload-outline-offset);
  filter: saturate(var(--spw-sigil-saturate)) brightness(var(--spw-sigil-brightness));
  translate: 0 var(--spw-sigil-payload-lift);
  scale: var(--spw-sigil-payload-scale);
  transition-property:
    background-color,
    border-color,
    color,
    box-shadow,
    filter,
    opacity,
    outline-color,
    outline-offset,
    outline-width,
    scale,
    translate;
  transition-duration: var(--spw-sigil-transition-duration);
  transition-timing-function: var(--handle-ease, ease);
}

:where(
  .frame-sigil,
  .frame-card-sigil,
  .frame-panel-sigil,
  .syntax-token,
  .operator-chip,
  .spec-pill,
  .header-sigil,
  .site-footer__brand
)[data-spw-sigil-payload-scope="page-region"] {
  text-shadow: 0 0 0.7rem
    color-mix(in srgb, var(--spw-sigil-payload-color) var(--spw-sigil-topic-alpha, 10%), transparent);
}

:where([data-spw-sigil-region-tempo="snap"]) {
  --spw-sigil-transition-duration: 110ms;
}

:where([data-spw-sigil-region-tempo="fast"]) {
  --spw-sigil-transition-duration: 130ms;
}

:where([data-spw-sigil-region-tempo="deliberate"]) {
  --spw-sigil-transition-duration: 220ms;
}

:where([data-spw-sigil-region-tempo="settle"]) {
  --spw-sigil-transition-duration: 260ms;
}

:where([data-spw-sigil-transition="approach"]) {
  --spw-sigil-payload-alpha: 32%;
  --spw-sigil-payload-outline: 1px;
  --spw-sigil-payload-outline-offset: 2px;
  --spw-sigil-payload-lift: -1px;
  --spw-sigil-payload-scale: 1.004;
  --spw-sigil-saturate: 1.08;
  --spw-sigil-brightness: 1.02;
}

:where([data-spw-sigil-transition="prime"]) {
  --spw-sigil-payload-alpha: 42%;
  --spw-sigil-payload-outline: 1px;
  --spw-sigil-payload-outline-offset: 3px;
  --spw-sigil-payload-lift: -1px;
  --spw-sigil-payload-scale: 1.006;
  --spw-sigil-saturate: 1.12;
  --spw-sigil-brightness: 1.03;
}

:where([data-spw-sigil-transition="commit"]) {
  --spw-sigil-payload-alpha: 54%;
  --spw-sigil-payload-outline: 2px;
  --spw-sigil-payload-outline-offset: 1px;
  --spw-sigil-payload-lift: 1px;
  --spw-sigil-payload-scale: 0.996;
  --spw-sigil-saturate: 1.16;
  --spw-sigil-brightness: 1.04;
  animation: spw-sigil-payload-commit
    var(--spw-sigil-transition-duration)
    var(--ease-settle, ease)
    var(--spw-sigil-stagger-delay, 0ms)
    1;
}

:where([data-spw-sigil-transition="release"]) {
  --spw-sigil-payload-alpha: 18%;
  --spw-sigil-payload-outline: 1px;
  --spw-sigil-payload-outline-offset: 4px;
  --spw-sigil-saturate: 0.96;
  --spw-sigil-brightness: 1;
}

:where([data-spw-sigil-transition="settle"]) {
  --spw-sigil-payload-alpha: 14%;
  --spw-sigil-payload-outline: 1px;
  --spw-sigil-payload-outline-offset: 5px;
}

@keyframes spw-sigil-payload-commit {
  0% {
    outline-offset: 0;
    filter: saturate(1.04) brightness(1);
  }

  46% {
    outline-offset: 3px;
    filter: saturate(1.18) brightness(1.04);
  }

  100% {
    outline-offset: var(--spw-sigil-payload-outline-offset);
    filter: saturate(var(--spw-sigil-saturate)) brightness(var(--spw-sigil-brightness));
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-spw-sigil-transition]) {
    --spw-sigil-payload-lift: 0px;
    --spw-sigil-payload-scale: 1;
    animation: none;
    transition-duration: 1ms;
  }
}

/* Sigil (grammar) vs identifier (stable address) — distinct visual roles */
:where([data-spw-sigil-role="grammar"]) {
  --spw-operator-color: var(--spw-operator-color, var(--active-op-color, var(--teal, #008080)));
}

:where([data-spw-address-role="identifier"]) {
  font-variant-numeric: tabular-nums;
}

:where(
  .frame-sigil[data-spw-address-role="identifier"],
  .operator-chip[data-spw-address-role="identifier"],
  [data-spw-sigil-role="grammar"][data-spw-address-role="identifier"]
) {
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
}

:where([data-spw-sigil-role="grammar"]:not([data-spw-address-role="identifier"])) {
  font-weight: inherit;
}

:where([data-spw-address-role="identifier"]:not([data-spw-sigil-role="grammar"])) {
  color: color-mix(in srgb, var(--ink-soft, currentColor) 82%, var(--active-op-color, var(--teal)) 18%);
  font-size: 0.92em;
}

:where([data-spw-sigil-role="grammar"][data-spw-address-role="identifier"]) :where(.syntax-token, [data-spw-operator]) {
  color: var(--spw-operator-color, var(--active-op-color, var(--teal, #008080)));
}

}

/* /public/css/handles/metrics.css */
@layer handles {
/* ==========================================================================
   metrics.css
   --------------------------------------------------------------------------
   Behavior bundle for body[data-spw-features~="metrics"].
   Frame metrics bar structure and hover states live in handles/operators.css
   (core). This scope exists so runtime modules can gate on the metrics feature.
   ========================================================================== */

:where([data-spw-features~="metrics"] .frame-metrics-bar) {
  container-type: inline-size;
}

:where([data-spw-features~="metrics"] .frame-metrics-items) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}
}

/* /public/css/handles/phase-controls.css */
@layer handles {
/* ==========================================================================
 * phase-controls.css
 * --------------------------------------------------------------------------
 * Phase Layer Menu
 * Spw phase choice appears as a braced layer control, not arrow navigation.
 * Integrated with the operator matrix, depth tiers, and motion grammar.
 * ========================================================================== */

:where(.phase-controls) {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    
    /* Support the inline HSL injection, but fallback safely to the active operator hue */
    --local-phase-color: hsl(
        var(--current-phase-hue, 180) 
        var(--current-phase-sat, 100%) 
        var(--current-phase-light, 28%)
    );
    color: var(--local-phase-color, var(--active-op-color, #008080));
}

/* ─── Trigger Button ────────────────────────────────────────────────────── */

:where(.phase-menu-trigger) {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--touch-target-min, 2.75rem) * 0.75);
    padding: var(--space-2xs, 0.25rem) var(--space-xs, 0.55rem);
    border: 1px solid currentColor;
    border-radius: var(--shape-component, 6px);
    background: var(--surface-soft, rgba(255, 255, 255, 0.44));
    color: currentColor;
    cursor: pointer;
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.75rem);
    line-height: 1.2;
    list-style: none;
    transition:
        background var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        box-shadow var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.phase-menu-trigger::-webkit-details-marker) {
    display: none;
}

:where(.phase-menu-trigger::before) {
    content: '#:layer · ';
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    letter-spacing: 0.02em;
    transition: color var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.phase-menu-trigger:hover) {
    background: var(--surface, rgba(255, 255, 255, 0.68));
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
}

:where(.phase-menu-trigger:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

:where(.phase-menu[open] .phase-menu-trigger) {
    background: var(--surface-strong, rgba(255, 255, 255, 0.88));
}

/* ─── Dropdown Options Panel ────────────────────────────────────────────── */

:where(.phase-menu-options) {
    position: absolute;
    z-index: var(--layer-floating, 100);
    top: calc(100% + var(--space-2xs, 0.35rem));
    right: 0;
    display: grid;
    min-width: 13rem;
    gap: var(--space-3xs, 0.25rem);
    padding: var(--space-2xs, 0.45rem);
    border: 1px solid var(--spw-shell-line-strong, rgba(0, 128, 128, 0.34));
    border-radius: var(--shape-surface, 10px);
    background: var(--floating-bg, rgba(255, 255, 255, 0.95));
    box-shadow: var(--floating-shadow, 0 8px 32px rgba(0,0,0,0.12));
    -webkit-backdrop-filter: blur(var(--material-blur, 12px));
    backdrop-filter: blur(var(--material-blur, 12px));
}

:where(.phase-menu:not([open]) .phase-menu-options) {
    display: none;
}

/* ─── Menu Choices ──────────────────────────────────────────────────────── */

:where(.phase-menu-choice) {
    width: 100%;
    min-height: calc(var(--touch-target-min, 2.75rem) * 0.75);
    padding: var(--space-2xs, 0.35rem) var(--space-xs, 0.5rem);
    border: 1px solid transparent;
    border-radius: var(--shape-component, 6px);
    background: transparent;
    color: var(--ink, #161c1d);
    cursor: pointer;
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.75rem);
    text-align: left;
    transition:
        background var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        color var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.phase-menu-choice:hover, .phase-menu-choice:focus-visible) {
    background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.06));
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    outline: none;
}

/* Use color-mix to tint the active state with the inherited phase color */
:where(.phase-menu-choice[aria-pressed="true"]) {
    color: currentColor; 
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 40%, transparent);
    font-weight: 700;
}

:where(.phase-menu-choice[aria-pressed="true"]::after) {
    content: ' = current';
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-weight: 400;
}

/* ─── Responsive & Accessibility ────────────────────────────────────────── */

@media (max-width: 640px) {
    :where(.phase-controls) {
        width: 100%;
        margin-left: 0;
    }

    :where(.phase-menu-options) {
        right: auto;
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.phase-menu-trigger, .phase-menu-trigger::before, .phase-menu-choice) {
        transition: none !important;
    }
}
}

/* /public/css/handles/logo.css */
@layer handles {
/* ==========================================================================
 * logo.css
 * --------------------------------------------------------------------------
 * Spwashi Logo Runtime
 * The logo is the smallest unit of the site's physics.
 * Every state it can enter — preview, charged, emitting, settled —
 * matches the site-wide canonical state vocabulary.
 *
 * Component topology: island (self-contained, interactive, serializable)
 * Touch: tap channel
 * State contract: settled → preview → charged → emitting → settled
 * ========================================================================== */

:where(.spw-logo) {
  --logo-charge: 0;
  --logo-arc-color: currentColor;
  --logo-w-color: currentColor;
  --logo-wordmark-opacity: 1;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 0.45em);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;

  transition:
    color var(--touch-acknowledge, 90ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    opacity var(--touch-acknowledge, 90ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1));
}

/* ── Mark (SVG glyph) ── */

:where(.spw-logo-mark) {
  flex-shrink: 0;
  display: block;
  width: 1.4em;
  height: 1.52em;  /* preserves 48:52 aspect ratio */
  color: var(--active-op-color, #008080);
  transition:
    color var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    transform var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    filter var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1));
  will-change: transform, filter;
}

:where(.mark-layer) {
  transition:
    stroke-opacity var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    stroke-width var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    stroke var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1));
}

:where(.mark-layer--arc) { stroke-opacity: 0.85; }
:where(.mark-layer--w)   { stroke-opacity: 0.65; }

/* ── Wordmark ── */

:where(.spw-logo-wordmark) {
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: var(--text-size-sm, 0.88em);
  letter-spacing: 0.02em;
  font-weight: 400;
  opacity: var(--logo-wordmark-opacity);
  transition: opacity var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1));
  white-space: nowrap;
}

/* ── State: settled (default) ── */

:where(.spw-logo[data-logo-state="settled"], .spw-logo:not([data-logo-state])) {
  --logo-charge: 0;
}

/* ── State: preview ── */

:where(.spw-logo[data-logo-state="preview"]) {
  --logo-charge: 0.3;
}

:where(.spw-logo[data-logo-state="preview"] .spw-logo-mark) {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

:where(.spw-logo[data-logo-state="preview"] .mark-layer--arc) {
  stroke-opacity: 1;
}

/* ── State: charged ── */

:where(.spw-logo[data-logo-state="charged"]) {
  --logo-charge: 0.7;
}

:where(.spw-logo[data-logo-state="charged"] .spw-logo-mark) {
  filter: brightness(1.08) saturate(1.12);
  transform: translateY(-1px) scale(1.04);
}

:where(.spw-logo[data-logo-state="charged"] .mark-layer--arc) {
  stroke-opacity: 1;
  stroke-width: 2.8;
}

:where(.spw-logo[data-logo-state="charged"] .mark-layer--w) {
  stroke-opacity: 0.9;
}

/* ── State: emitting ── */

:where(.spw-logo[data-logo-state="emitting"]) {
  --logo-charge: 1;
}

:where(.spw-logo[data-logo-state="emitting"] .spw-logo-mark) {
  filter: brightness(1.12) saturate(1.2);
  transform: scale(1.06);
}

@keyframes logo-emit-pulse {
  0%   { opacity: 0; transform: scale(0.95); }
  40%  { opacity: 0.3; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.2); }
}

:where(.spw-logo[data-logo-state="emitting"])::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--active-op-color, #008080);
  border-radius: var(--radius-pill, 50%);
  pointer-events: none;
  animation: logo-emit-pulse var(--duration-slow, 480ms) var(--ease-release, cubic-bezier(0.18, 0.72, 0.18, 1)) forwards;
}

/* ── Scroll-charge: driven by --logo-charge from JS ── */

:where(.spw-logo[data-logo-scroll] .spw-logo-mark) {
  filter:
    brightness(calc(1 + var(--logo-charge, 0) * 0.08))
    saturate(calc(1 + var(--logo-charge, 0) * 0.15));
}

/* ── Header placement ── */

:where(.header-logo) {
  display: flex;
  align-items: center;
}

/* ── Responsive & Accessibility ── */

@media (max-width: 480px) {
  :where(.spw-logo-wordmark) {
    display: none;
  }
}

@media (max-width: 360px) {
  :where(.spw-logo-mark) {
    width: 1.1em;
    height: 1.28em;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.spw-logo[data-logo-state="emitting"])::after {
    animation: none !important;
    display: none;
  }
  
  :where(.spw-logo-mark, .mark-layer, .spw-logo) {
    transition: none !important;
    transform: none !important;
  }
}

}

/* /public/css/handles/page-region-rail.css */
@layer handles {
/* ==========================================================================
   page-region-rail.css
   --------------------------------------------------------------------------
   Auto-built region index for long editorial routes (desktop explore aid).
   ========================================================================== */

:where(.spw-page-region-rail) {
  display: none;
}

@media (min-width: 68rem) {
  :where(html[data-spw-page-region-rail="on"]) :where(.spw-page-region-rail) {
    position: fixed;
    inset-block: calc(var(--header-height, 4rem) + 1rem) max(1rem, env(safe-area-inset-bottom));
    inset-inline-end: max(0.65rem, env(safe-area-inset-right));
    z-index: calc(var(--z-priority, 2000) + 6);
    display: grid;
    align-content: start;
    gap: 0.42rem;
    inline-size: min(11.5rem, calc(100vw - 1.2rem));
    max-block-size: calc(100vh - var(--header-height, 4rem) - 2rem);
    overflow: auto;
    padding: 0.55rem 0.5rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 82%, transparent);
    border-radius: var(--shape-component, 6px);
    background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 92%, var(--active-op-color, #008080) 8%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
  }

  :where(.spw-page-region-rail__kicker) {
    margin: 0;
    color: var(--ink-soft);
    font-family: var(--site-mono-font, "JetBrains Mono", monospace);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  :where(.spw-page-region-rail__list) {
    display: grid;
    gap: 0.22rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(.spw-page-region-rail__link) {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.36rem;
    align-items: start;
    padding: 0.22rem 0.34rem;
    border-radius: calc(var(--shape-element, 4px) + 1px);
    color: var(--ink-soft);
    font-size: 0.68rem;
    line-height: 1.25;
    text-decoration: none;
    transition:
      background-color 160ms ease,
      color 160ms ease;
  }

  :where(.spw-page-region-rail__link:is(:hover, :focus-visible)) {
    background: color-mix(in srgb, var(--active-op-color, #008080) 8%, transparent);
    color: var(--ink);
    outline: none;
  }

  :where(.spw-page-region-rail__link[data-spw-region-active="true"]) {
    background: color-mix(in srgb, var(--active-op-color, #008080) 12%, transparent);
    color: var(--ink);
    font-weight: 600;
  }

  :where(.spw-page-region-rail__link[data-spw-affordance="tune"]) {
    border-inline-start: 2px solid color-mix(in srgb, var(--op-action-color, #006b6b) 44%, transparent);
  }

  :where(.spw-page-region-rail[data-spw-palette-resonance="software"] .spw-page-region-rail__link) {
    --active-op-color: var(--op-frame-color, #0f7f7d);
  }

  :where(.spw-page-region-rail[data-spw-palette-resonance="craft"] .spw-page-region-rail__link) {
    --active-op-color: color-mix(in srgb, var(--op-action-color, #006b6b) 48%, var(--op-object-color, #b7791f));
  }

  :where(.spw-page-region-rail[data-spw-palette-resonance="math"] .spw-page-region-rail__link) {
    --active-op-color: color-mix(in srgb, var(--op-probe-color, #7d5bd1) 54%, var(--op-ref-color, #2477b3));
  }

  :where(.spw-page-region-rail[data-spw-semantic-density="rich"] .spw-page-region-rail__meta) {
    color: color-mix(in srgb, var(--active-op-color, #008080) 46%, var(--ink-soft, rgba(27, 31, 35, 0.68)));
  }

  :where(.spw-page-region-rail__sigil) {
    font-family: var(--site-mono-font, "JetBrains Mono", monospace);
    font-size: 0.58rem;
    line-height: 1.4;
    opacity: 0.78;
  }

  :where(.spw-page-region-rail__label) {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  :where(.spw-page-region-rail__name) {
    min-width: 0;
  }

  :where(.spw-page-region-rail__meta) {
    color: color-mix(in srgb, var(--ink-soft, rgba(27, 31, 35, 0.68)) 72%, transparent);
    font-family: var(--site-mono-font, "JetBrains Mono", monospace);
    font-size: 0.56rem;
    font-weight: 500;
    line-height: 1.22;
  }
}

:where(html[data-spw-tuning-discoverability="quiet"]) :where(.spw-page-region-rail) {
  opacity: 0.72;
}

}