/* Generated by scripts/css-bundle.mjs — do not edit by hand. */
/* /public/css/systems/svg-surfaces.css */
@layer systems {
/* ==========================================================================
 * svg-surfaces.css
 * --------------------------------------------------------------------------
 * SVG surface layer.
 *
 * SVG enters as a bounded, captioned host. The HTML around the SVG remains the
 * semantic source of truth; the graphic projects relationships over it.
 *
 * Operator node color contexts (.op-node--{type}) are ungated — they apply
 * to any SVG that uses the naming convention, not just svg-surfaces contexts.
 * This lets inline SVG diagrams live anywhere and still pick up the palette.
 * ========================================================================== */

/* ─── Flow animation ─────────────────────────────────────────────────────── */

@keyframes svg-flow-dash {
    to { stroke-dashoffset: -28; }
}

/* ─── Operator node color contexts ──────────────────────────────────────── */
/*
 * Setting `color` on an op-node group makes all SVG text inside inherit it
 * through `fill: currentColor` (set by the .spw-svg-surface text rule below).
 * Circle fills/strokes are handled via the .spw-svg-node--{type} rules.
 */

.op-node--frame      { color: var(--op-frame-color, #008080); }
.op-node--object     { color: var(--op-object-color, #a67c00); }
.op-node--probe      { color: var(--op-probe-color, #4a2180); }
.op-node--ref        { color: var(--op-ref-color, #1d57a3); }
.op-node--action     { color: var(--op-action-color, #005959); }
.op-node--stream     { color: var(--op-stream-color, #208259); }
.op-node--surface    { color: var(--op-surface-color, #178282); }
.op-node--layer      { color: var(--op-layer-color, rgba(14, 18, 20, 0.68)); }
.op-node--baseline   { color: var(--op-baseline-color, #594d3f); }
.op-node--binding    { color: var(--op-binding-color, #8f401f); }
.op-node--meta       { color: var(--op-meta-color, #324a85); }
.op-node--merge      { color: var(--op-merge-color, #277a87); }
.op-node--normalize  { color: var(--op-normalize-color, #4d7539); }
.op-node--pragma     { color: var(--op-pragma-color, #883a3a); }

/* ─── SVG Container & Surface ───────────────────────────────────────────── */

[data-spw-features~="svg-surfaces"] .spw-svg-figure {
    --spw-svg-pointer-x: 50%;
    --spw-svg-pointer-y: 50%;
    --spw-svg-pointer-x-ratio: 0.5;
    --spw-svg-pointer-y-ratio: 0.5;
    --spw-svg-pointer-intensity: 0;
    --spw-svg-motion-rate: 4s;
    --spw-svg-node-fill-mix: 10%;
    --spw-svg-device-pointer-lift: var(--spw-svg-pointer-lift, 0.42);
    --spw-svg-brand-accent: var(--active-op-color, #008080);
    --spw-svg-brand-field: var(--surface, #ffffff);
    --spw-svg-surface-border: var(--spw-shell-line, rgba(14, 18, 20, 0.14));
    --spw-svg-surface-shadow: var(--component-shadow, 0 1px 3px rgba(0,0,0,0.05));
    display: grid;
    gap: calc(var(--spw-svg-space, var(--space-sm, 0.6rem)) * var(--spw-svg-gap-scale, 1));
    margin: 0;
    container-type: inline-size;
    position: relative;
    isolation: isolate;
}

[data-spw-features~="svg-surfaces"] .spw-svg-surface {
    display: block;
    width: 100%;
    max-width: calc(var(--measure-panel, 52rem) * var(--spw-svg-scale-factor, 1));
    height: auto;
    border: 1px solid var(--spw-svg-surface-border);
    border-radius: var(--shape-surface, 10px);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--spw-svg-brand-accent, var(--active-op-color, #008080)) 4%, transparent) 0%,
            transparent 24%
        ),
        var(--spw-svg-brand-field, var(--surface, #ffffff));
    box-shadow: var(--spw-svg-surface-shadow);
    color: var(--ink, #161c1d);
    transform:
        translate3d(0, calc(var(--spw-svg-pointer-intensity, 0) * var(--spw-svg-device-pointer-lift, var(--spw-svg-pointer-lift, 0)) * -0.18rem), 0)
        rotateX(calc((0.5 - var(--spw-svg-pointer-y-ratio, 0.5)) * var(--spw-svg-pointer-intensity, 0) * var(--spw-svg-device-pointer-lift, var(--spw-svg-pointer-lift, 0)) * 1.2deg))
        rotateY(calc((var(--spw-svg-pointer-x-ratio, 0.5) - 0.5) * var(--spw-svg-pointer-intensity, 0) * var(--spw-svg-device-pointer-lift, var(--spw-svg-pointer-lift, 0)) * 1.2deg));
    transform-origin: center;
    transition:
        border-color var(--duration-fast, 120ms) var(--ease-mechanical, ease),
        box-shadow var(--duration-base, 200ms) var(--ease-mechanical, ease),
        color var(--duration-fast, 120ms) var(--ease-mechanical, ease),
        background var(--duration-base, 200ms) var(--ease-mechanical, ease),
        transform var(--duration-base, 200ms) var(--ease-smooth, ease);
}

[data-spw-features~="svg-surfaces"] .spw-svg-surface:is(:hover, :focus-within) {
    --spw-svg-surface-border: color-mix(in srgb, var(--spw-svg-brand-accent, var(--active-op-color, #008080)) 28%, var(--spw-shell-line, rgba(14, 18, 20, 0.14)));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--spw-svg-brand-accent, var(--active-op-color, #008080)) 10%, transparent),
        0 10px 28px color-mix(in srgb, var(--spw-svg-brand-accent, var(--active-op-color, #008080)) 8%, transparent);
}

[data-spw-features~="svg-surfaces"] .spw-svg-surface text {
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    fill: currentColor;
}

/* ─── Structural Node Primitives ────────────────────────────────────────── */

[data-spw-features~="svg-surfaces"] .spw-svg-frame {
    fill: var(--surface-soft, rgba(255, 255, 255, 0.52));
    stroke: var(--line, rgba(14, 18, 20, 0.14));
    stroke-width: calc(var(--line-mid, 1.2px) * var(--spw-svg-stroke-scale, 1));
}

[data-spw-features~="svg-surfaces"] .spw-svg-node {
    fill: var(--surface-strong, rgba(255, 255, 255, 0.88));
    stroke: var(--active-op-border, rgba(0, 128, 128, 0.34));
    stroke-width: calc(var(--line-thick, 2.5px) * var(--spw-svg-stroke-scale, 1));
}

/* * Operator-colored node fills
 * Mixes against --surface-strong to ensure nodes invert correctly in dark mode
 * while maintaining a solid "fill" that obscures paths behind them.
 */
[data-spw-features~="svg-surfaces"] .spw-svg-node--frame     { stroke: var(--op-frame-color, #008080);      fill: color-mix(in srgb, var(--op-frame-color, #008080)      var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--probe     { stroke: var(--op-probe-color, #4a2180);      fill: color-mix(in srgb, var(--op-probe-color, #4a2180)      var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--ref       { stroke: var(--op-ref-color, #1d57a3);        fill: color-mix(in srgb, var(--op-ref-color, #1d57a3)        var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--action    { stroke: var(--op-action-color, #005959);     fill: color-mix(in srgb, var(--op-action-color, #005959)     var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--object    { stroke: var(--op-object-color, #a67c00);     fill: color-mix(in srgb, var(--op-object-color, #a67c00)     var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--surface   { stroke: var(--op-surface-color, #178282);    fill: color-mix(in srgb, var(--op-surface-color, #178282)    var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--stream    { stroke: var(--op-stream-color, #208259);     fill: color-mix(in srgb, var(--op-stream-color, #208259)     var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--merge     { stroke: var(--op-merge-color, #277a87);      fill: color-mix(in srgb, var(--op-merge-color, #277a87)      var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--binding   { stroke: var(--op-binding-color, #8f401f);    fill: color-mix(in srgb, var(--op-binding-color, #8f401f)    var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--meta      { stroke: var(--op-meta-color, #324a85);       fill: color-mix(in srgb, var(--op-meta-color, #324a85)       var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--pragma    { stroke: var(--op-pragma-color, #883a3a);     fill: color-mix(in srgb, var(--op-pragma-color, #883a3a)     var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--normalize { stroke: var(--op-normalize-color, #4d7539);  fill: color-mix(in srgb, var(--op-normalize-color, #4d7539)  var(--spw-svg-node-fill-mix, 10%), var(--surface-strong, #ffffff)); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--layer     { stroke: var(--op-layer-color, rgba(14,18,20,0.68)); fill: var(--surface-strong, #ffffff); }
[data-spw-features~="svg-surfaces"] .spw-svg-node--baseline  { stroke: var(--op-baseline-color, #594d3f);   fill: var(--surface-strong, #ffffff); }

/* ─── Flows & Connectors ────────────────────────────────────────────────── */

[data-spw-features~="svg-surfaces"] .spw-svg-flow {
    fill: none;
    stroke: var(--active-op-color, #008080);
    stroke-width: calc(var(--line-mid, 1.5px) * var(--spw-svg-stroke-scale, 1));
    stroke-linecap: round;
    stroke-dasharray: var(--spw-svg-flow-dash, 5) var(--spw-svg-flow-gap, 9);
    opacity: 0.58;
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-device="coarse"],
[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-device="hoverless"] {
    --spw-svg-device-pointer-lift: 0.12;
    gap: max(0.8rem, var(--spw-svg-space, 0.6rem));
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-device="coarse"] .spw-svg-surface,
[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-device="hoverless"] .spw-svg-surface {
    transform: none;
}

[data-spw-features~="svg-surfaces"] .spw-svg-flow--animated {
    /* Using generic animation token fallback if --duration-slow is missing */
    animation: svg-flow-dash var(--spw-svg-motion-rate, 4s) linear infinite;
}

/* ─── Declarative tuning states ─────────────────────────────────────────── */

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-tune-motion="slow"] {
    --spw-svg-motion-rate: 7s;
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-tune-motion="quick"] {
    --spw-svg-motion-rate: 2.4s;
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-tune-motion="paused"] .spw-svg-flow--animated {
    animation-play-state: paused;
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-tune-contrast="soft"] {
    --spw-svg-node-fill-mix: 6%;
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-tune-contrast="strong"] {
    --spw-svg-node-fill-mix: 18%;
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-pointer]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: var(--shape-surface, 10px);
    opacity: calc(var(--spw-svg-pointer-intensity, 0) * 0.48);
    background:
        radial-gradient(
            circle at var(--spw-svg-pointer-x, 50%) var(--spw-svg-pointer-y, 50%),
            color-mix(in srgb, var(--spw-svg-brand-accent, var(--active-op-color, #008080)) 14%, transparent),
            transparent 38%
        );
    mix-blend-mode: multiply;
    transition: opacity var(--duration-base, 200ms) var(--ease-smooth, ease);
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-pointer="trace"][data-spw-svg-pointer-state="active"] .spw-svg-flow {
    opacity: 0.9;
    stroke-width: calc(var(--line-mid, 1.5px) * var(--spw-svg-stroke-scale, 1) * 1.18);
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-pointer="field"][data-spw-svg-pointer-state="active"] .spw-svg-surface {
    border-color: color-mix(in srgb, var(--spw-svg-brand-accent, var(--active-op-color, #008080)) 32%, var(--spw-shell-line, rgba(14, 18, 20, 0.14)));
    box-shadow:
        var(--spw-svg-surface-shadow),
        0 10px 28px color-mix(in srgb, var(--spw-svg-brand-accent, var(--active-op-color, #008080)) 10%, transparent);
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-device="coarse"][data-spw-svg-pointer="field"][data-spw-svg-pointer-state="active"] .spw-svg-surface,
[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-device="hoverless"][data-spw-svg-pointer="field"][data-spw-svg-pointer-state="active"] .spw-svg-surface {
    box-shadow:
        var(--spw-svg-surface-shadow),
        0 8px 20px color-mix(in srgb, var(--spw-svg-brand-accent, var(--active-op-color, #008080)) 8%, transparent);
}

/* ─── Typography & Labels ───────────────────────────────────────────────── */

[data-spw-features~="svg-surfaces"] .spw-svg-label {
    font-size: var(--text-size-sm, 0.92rem);
    font-weight: 700;
    letter-spacing: var(--spw-svg-label-spacing, 0.04em);
    opacity: var(--spw-svg-caption-opacity, 1);
}

[data-spw-features~="svg-surfaces"] .spw-svg-note {
    fill: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-size: var(--text-size-xs, 0.72rem);
    letter-spacing: calc(var(--spw-svg-label-spacing, 0.04em) * 0.75);
    opacity: var(--spw-svg-narrative-intensity, 1);
    transition:
        fill var(--duration-fast, 120ms) var(--ease-mechanical, ease),
        opacity var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

/* ─── Operator Grammar Flow Diagram ─────────────────────────────────────── */

[data-spw-features~="svg-surfaces"] .spw-svg-flow-diagram {
    padding: var(--space-2xs, 0.2rem) 0;
    overflow: visible;
}

/* Extension for finer notes inside diagram boundaries */
[data-spw-features~="svg-surfaces"] .spw-svg-surface .spw-svg-note {
    fill: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-size: calc(var(--text-size-xs, 0.68rem) * 0.95);
    letter-spacing: calc(var(--spw-svg-label-spacing, 0.04em) * 0.5);
    opacity: var(--spw-svg-rail-intensity, 1);
}

/* ─── Rail companion ────────────────────────────────────────────────────── */
/*
 * A host can declare a rail companion via data-spw-svg-companion="rail" on
 * the <figure>. At ≥720px the figure becomes a two-column grid: the SVG is
 * primary, the .spw-svg-rail sibling holds register entries (legend chips,
 * focused-node descriptors). Below 720px the rail collapses back into flow.
 * The rail is for peripheral register, never primary content or navigation.
 */

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-companion="rail"] {
    display: grid;
    gap: var(--space-sm, 0.6rem);
    grid-template-columns: 1fr;
    grid-template-areas:
        "surface"
        "rail"
        "caption";
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-companion="rail"] > :where(.spw-svg-surface, svg) {
    grid-area: surface;
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-companion="rail"] > .spw-svg-rail {
    grid-area: rail;
}

[data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-companion="rail"] > figcaption {
    grid-area: caption;
}

.spw-svg-rail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs, 0.36rem);
    align-content: start;
    margin: 0;
    padding: 0;
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.78rem);
    line-height: 1.3;
}

.spw-metaphysics-host[data-spw-contrast-state="raised"] .spw-svg-surface {
    border-color: color-mix(in srgb, var(--spw-image-accent, var(--active-op-color, #008080)) 18%, var(--spw-shell-line, rgba(14, 18, 20, 0.14)));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 8px 18px color-mix(in srgb, var(--spw-image-accent, var(--active-op-color, #008080)) 8%, transparent);
    color: color-mix(in srgb, var(--ink, #161c1d) 88%, var(--spw-image-accent, var(--active-op-color, #008080)));
}

.spw-metaphysics-host[data-spw-contrast-state="focused"] .spw-svg-surface {
    border-color: color-mix(in srgb, var(--spw-image-accent, var(--active-op-color, #008080)) 24%, var(--spw-shell-line, rgba(14, 18, 20, 0.14)));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--spw-image-accent, var(--active-op-color, #008080)) 5%, transparent), transparent 48%),
        var(--surface, #ffffff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 10px 24px color-mix(in srgb, var(--spw-image-accent, var(--active-op-color, #008080)) 12%, transparent);
    color: color-mix(in srgb, var(--ink, #161c1d) 82%, var(--spw-image-accent, var(--active-op-color, #008080)));
}

.spw-metaphysics-host[data-spw-contrast-state="focused"] .spw-svg-note {
    fill: color-mix(in srgb, var(--ink, #161c1d) 74%, var(--spw-image-accent, var(--active-op-color, #008080)));
}

.spw-metaphysics-host[data-spw-image-state="primed"] .spw-svg-flow {
    opacity: 0.68;
}

.spw-metaphysics-host[data-spw-image-state="engaged"] .spw-svg-flow {
    opacity: 0.82;
}

.spw-svg-rail > * {
    margin: 0;
}

/* Mobile: rail scrolls horizontally instead of wrapping — keeps SVG full-width */
@media (max-width: 719px) {
    [data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-companion="rail"] > .spw-svg-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--space-xs, 0.48rem);
        /* Fade edges to hint at scroll */
        mask-image: linear-gradient(
            to right,
            transparent 0,
            black 1rem,
            black calc(100% - 1rem),
            transparent 100%
        );
        scroll-snap-type: x proximity;
    }

    .spw-svg-rail::-webkit-scrollbar {
        display: none;
    }

    /* Larger touch targets on mobile for rail chips */
    .spw-svg-rail > * {
        min-height: max(2.15rem, var(--touch-target-compact, 2.15rem));
        display: flex;
        align-items: center;
        scroll-snap-align: start;
    }
}

@media (min-width: 720px) {
    [data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-companion="rail"] {
        grid-template-columns: minmax(0, 1fr) min(20%, 14rem);
        grid-template-areas:
            "surface rail"
            "caption caption";
        align-items: start;
    }

    [data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-companion="rail"] > .spw-svg-rail {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        position: sticky;
        top: calc(var(--shell-header-height, var(--header-height, 4rem)) + 1rem);
        max-height: calc(100dvh - var(--shell-header-height, var(--header-height, 4rem)) - 2rem);
        overflow-y: auto;
    }
}

@container (max-width: 30rem) {
    [data-spw-features~="svg-surfaces"] .spw-svg-surface {
        border-radius: var(--shape-component, 8px);
    }

    [data-spw-features~="svg-surfaces"] .spw-svg-label {
        font-size: 0.8rem;
    }

    [data-spw-features~="svg-surfaces"] .spw-svg-note {
        font-size: 0.62rem;
    }

    .spw-svg-rail {
        gap: 0.28rem;
    }
}

@media (min-width: 72rem) {
    [data-spw-features~="svg-surfaces"] .spw-svg-figure[data-spw-svg-companion="rail"] {
        grid-template-columns: minmax(0, 1fr) min(28%, 18rem);
        gap: var(--space-md, 1rem);
    }
}

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

@media (max-width: 700px) {
    [data-spw-features~="svg-surfaces"] .spw-svg-surface {
        border-radius: var(--shape-component, 8px);
    }

    [data-spw-features~="svg-surfaces"] .spw-svg-label {
        font-size: 0.78rem;
    }

    [data-spw-features~="svg-surfaces"] .spw-svg-note {
        font-size: 0.58rem;
    }

    [data-spw-features~="svg-surfaces"] .spw-svg-figure {
        --spw-svg-device-pointer-lift: 0.08;
    }

    /* Smaller operator diagrams on mobile: hide intent labels */
    [data-spw-features~="svg-surfaces"] .spw-svg-flow-diagram .op-intent-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-spw-features~="svg-surfaces"] .spw-svg-flow {
        animation: none;
    }

    [data-spw-features~="svg-surfaces"] .spw-svg-surface {
        transform: none;
    }

    [data-spw-features~="svg-surfaces"] .spw-svg-figure {
        --spw-svg-device-pointer-lift: 0;
    }
}
}

/* /public/css/systems/svg-personas.css */
@layer systems {
/* ==========================================================================
 * svg-personas.css
 * --------------------------------------------------------------------------
 * Spw SVG Personas & Meta-UI
 * Tailors SVG rendering and interaction artifacts to the active technical persona.
 * Integrated with the global token ecology, eliminating the need for manual
 * dark/light mode overrides.
 * ========================================================================== */

/* ─── Viewer@ (Default) ─────────────────────────────────────────────────── */
/* Clean, standard rendering using inherited theme variables. */

:where(.spw-svg-surface) {
    background: var(--surface, #ffffff);
    transition: all var(--duration-deliberate, 360ms) var(--ease-mechanical, ease);
}

/* ─── Doodler@ ──────────────────────────────────────────────────────────── */
/* Hand-drawn aesthetic: sketchy lines, paper texture, vibrant flows. */

:where([data-spw-persona="doodler"] .spw-svg-surface) {
    filter: url('#paper-texture');
    border: 2px solid var(--op-object-color, #a67c00);
    border-radius: 12px 8px 14px 10px; /* irregular */
}

:where(
    [data-spw-persona="doodler"] .spw-svg-surface circle,
    [data-spw-persona="doodler"] .spw-svg-surface rect,
    [data-spw-persona="doodler"] .spw-svg-surface path:not(.spw-svg-flow)
) {
    filter: url('#doodler-sketch');
    stroke-width: 2;
}

:where([data-spw-persona="doodler"] .spw-svg-flow) {
    stroke-width: 3;
    opacity: 0.8;
    filter: drop-shadow(0 0 4px var(--active-op-color, #008080));
}

/* Doodler Particle Burst (Injected by JS) */
:where(.doodler-burst) {
    position: absolute;
    pointer-events: none;
    color: var(--op-object-color, #a67c00);
    font-size: var(--text-size-xl, 1.2rem);
    transform: translate(-50%, -50%);
    animation: doodler-scatter var(--duration-slow, 480ms) var(--ease-release, ease-out) forwards;
}

@keyframes doodler-scatter {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -250%) scale(1.5) rotate(15deg); opacity: 0; letter-spacing: 0.5em; }
}

/* ─── Scribe@ ───────────────────────────────────────────────────────────── */
/* Blueprint aesthetic: grid background, rigid lines, meta reveals. */

:where([data-spw-persona="scribe"] .spw-svg-surface) {
    /* Subtle technical grid */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTSAyMCAwIEwgMCAwIDAgMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhOTk5OSIgc3Ryb2tlLXdpZHRoPSIwLjIiIG9wYWNpdHk9IjAuMTUiLz48L3N2Zz4=');
    background-color: var(--surface-code, #12171b);
    border: 1px solid var(--active-op-color, #008080);
}

:where([data-spw-persona="scribe"] .spw-svg-surface text) {
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: 0.9em;
    fill: var(--surface-strong, #ffffff);
}

:where([data-spw-persona="scribe"] .spw-svg-node) {
    stroke-dasharray: 2 1; /* technical dashed border */
}

/* Scribe Meta Tooltip (Injected by JS) */
:where(.scribe-meta-tooltip) {
    position: absolute;
    transform: translateX(-50%) translateY(10px);
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.65rem);
    background: var(--surface-strong, #ffffff);
    color: var(--ink, #161c1d);
    padding: var(--space-3xs, 3px) var(--space-xs, 8px);
    border: 1px solid var(--line-strong, rgba(0, 128, 128, 0.34));
    border-radius: var(--shape-element, 3px);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: var(--shadow-active, 0 8px 28px rgba(0, 0, 0, 0.10));
    transition:
        opacity var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        transform var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.scribe-meta-tooltip.is-visible) {
    opacity: 0.95;
    transform: translateX(-50%) translateY(0);
}

/* ─── Accessibility Constraints ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    :where(.doodler-burst) {
        animation: none !important;
        display: none;
    }

    :where(.scribe-meta-tooltip) {
        transition: none !important;
    }
}
}