/* MAIA Motion System — FlowDiagram visual language (Etapa 02).
   One file defines how every node / edge / data pulse looks, in every diagram, in every state.
   Geometry is inline in FlowDiagram.dc.html; state comes from data-* attributes written by the runtime.

   [data-flow]                                 the diagram <svg>
   g[data-node-kind="maia|agent|provider|capability|component|task"][data-node-state="idle|active|done|dim"]
   g[data-edge-state="hidden|idle|active|done"]  > path[data-role="edge"] + path[data-role="arrow"]
   g[data-pulse-dir="out|back"]                DataPulse */

[data-flow] text { font-family: var(--font-mono); fill: var(--maia-text-3); letter-spacing: .14em; text-transform: uppercase; user-select: none; pointer-events: none; }
[data-flow] [data-role="label"] { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; fill: var(--maia-text-1); }
[data-flow] [data-role="meta"] { font-size: 8.5px; fill: var(--maia-text-4); }
[data-flow] [data-role="status"] { font-size: 7.5px; fill: var(--maia-text-4); text-anchor: end; transition: fill var(--dur-base) var(--ease-hud); }

[data-flow] [data-node-kind="maia"] [data-role="label"] { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; fill: var(--maia-cyan); }
[data-flow] [data-node-kind="maia"] [data-role="meta"] { fill: var(--maia-text-3); }
[data-flow] [data-node-kind="task"] [data-role="label"],
[data-flow] [data-node-kind="capability"] [data-role="label"] { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; fill: var(--maia-text-2); }
[data-flow] [data-node-kind="task"] [data-role="label"] { font-size: 10px; letter-spacing: .2em; }
[data-flow] [data-node-kind="component"] [data-role="label"] { font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; fill: var(--maia-text-4); }
[data-flow] [data-node-kind="component"] [data-role="meta"] { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; fill: var(--maia-text-1); transition: fill var(--dur-base) var(--ease-hud); }

/* boxes — hairlines get thinner as hierarchy drops */
[data-flow] [data-role="box"] { fill: var(--maia-surface-1); stroke: var(--maia-line); stroke-width: 1; transition: stroke var(--dur-base) var(--ease-hud), fill var(--dur-base) var(--ease-hud); }
[data-flow] [data-node-kind="maia"] [data-role="box"] { fill: var(--maia-surface-2); stroke: var(--maia-line-strong); }
[data-flow] [data-node-kind="provider"] [data-role="box"],
[data-flow] [data-node-kind="task"] [data-role="box"] { stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="capability"] [data-role="box"],
[data-flow] [data-node-kind="component"] [data-role="box"] { fill: transparent; stroke: var(--maia-line-faint); }
[data-flow] [data-node-kind="component"] [data-role="box"] { fill: var(--maia-surface-1); stroke: var(--maia-line-soft); }
[data-flow] [data-role="corners"] { fill: none; stroke: var(--maia-cyan); stroke-width: 1; opacity: .75; }
[data-flow] [data-role="glow"] { fill: var(--maia-cyan); opacity: 0; filter: blur(10px); transition: opacity var(--dur-slow) var(--ease-hud); }
[data-flow] [data-role="dot"] { fill: var(--maia-text-4); transition: fill var(--dur-base) var(--ease-hud); }

/* node states */
[data-flow] [data-node-state="active"] [data-role="box"] { stroke: var(--maia-line-strong); }
[data-flow] [data-node-kind="maia"][data-node-state="active"] [data-role="box"] { stroke: var(--maia-cyan); }
[data-flow] [data-node-kind="maia"][data-node-state="active"] [data-role="glow"] { opacity: .18; }
[data-flow] [data-node-kind="agent"][data-node-state="active"] [data-role="glow"] { opacity: .07; }
[data-flow] [data-node-state="active"] [data-role="status"],
[data-flow] [data-node-state="active"] [data-role="dot"] { fill: var(--maia-cyan); }
[data-flow] [data-node-state="active"] [data-role="meta"] { fill: var(--maia-text-2); }
[data-flow] [data-node-state="done"] [data-role="status"],
[data-flow] [data-node-state="done"] [data-role="dot"] { fill: var(--maia-green); }
[data-flow] [data-node-state="dim"] [data-role="box"] { stroke: var(--maia-line-faint); }
[data-flow] [data-node-state="dim"] text { opacity: .55; }
[data-flow] [data-node-state="active"][data-node-kind="component"] [data-role="meta"] { fill: var(--maia-cyan-bright); }

/* edges — pathLength="1" normalises the dash so a reveal is a 0→1 dashoffset */
[data-flow] [data-role="edge"] { fill: none; stroke: var(--maia-line); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-out), stroke var(--dur-base) var(--ease-hud); }
[data-flow] [data-edge-state="hidden"] [data-role="edge"] { stroke-dashoffset: 1; }
[data-flow] [data-edge-state="active"] [data-role="edge"] { stroke: rgba(var(--maia-cyan-rgb), .6); }
[data-flow] [data-edge-state="done"] [data-role="edge"] { stroke: rgba(var(--maia-cyan-rgb), .3); }
[data-flow] [data-role="arrow"] { fill: none; stroke: var(--maia-line-strong); stroke-width: 1; opacity: 1; transition: opacity var(--dur-base) var(--ease-hud) 600ms, stroke var(--dur-base) var(--ease-hud); }
[data-flow] [data-edge-state="hidden"] [data-role="arrow"] { opacity: 0; transition-delay: 0ms; }
[data-flow] [data-edge-state="active"] [data-role="arrow"] { stroke: var(--maia-cyan); }

/* DataPulse — a real packet: small, cyan, minimal bloom, no trail */
[data-flow] [data-role="pulse-glow"] { fill: var(--maia-cyan); opacity: .32; filter: blur(3px); }
[data-flow] [data-role="pulse-core"] { fill: var(--maia-cyan); }
[data-flow] [data-pulse-dir="back"] [data-role="pulse-core"] { fill: var(--maia-bg); stroke: var(--maia-cyan-bright); stroke-width: 1; }
[data-flow] [data-pulse-dir="back"] [data-role="pulse-glow"] { opacity: .18; }

/* hover inspection (static diagrams) */
[data-flow][data-hoverable] [data-node-id] { cursor: default; }

/* reduced: information stays, displacement goes */
[data-motion="reduced"] [data-flow] * { transition-duration: var(--dur-fast) !important; transition-delay: 0ms !important; }

/* ---- Etapa 03 — sequential stages, workflow semantics, devices ---- */
[data-flow] [data-node-kind="stage"] [data-role="label"] { font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; fill: var(--maia-text-1); }
[data-flow] [data-node-kind="trigger"] [data-role="box"] { stroke: var(--maia-line-strong); stroke-dasharray: 3 3; }
[data-flow] [data-node-kind="skill"] [data-role="box"] { fill: transparent; stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="output"] [data-role="box"] { stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="device"] [data-role="box"] { fill: var(--maia-surface-2); stroke: var(--maia-line-strong); }
[data-flow] [data-node-kind="device"] [data-role="label"] { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; fill: var(--maia-text-1); }
[data-flow] [data-node-kind="device"][data-node-state="active"] [data-role="glow"],
[data-flow] [data-node-kind="device"][data-node-state="running"] [data-role="glow"] { opacity: .09; }
[data-flow] [data-node-kind="link"] [data-role="box"] { fill: transparent; stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="link"] [data-role="label"] { font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; fill: var(--maia-text-3); }
[data-flow] [data-role="icon"] { fill: none; stroke: var(--maia-cyan); stroke-width: 1; opacity: .7; transition: opacity var(--dur-base) var(--ease-hud); }
[data-flow] [data-node-state="pending"] [data-role="icon"] { opacity: .35; }
/* tiny activity marker — only on nodes that declare `activity: true` */
[data-flow] [data-role="activity"] { fill: var(--maia-cyan); opacity: 0; transition: opacity var(--dur-base) var(--ease-hud); }
[data-flow] [data-node-state="running"] [data-role="activity"] { opacity: .6; --breathe-min: .25; --breathe-max: .85; animation: ms-breathe 1400ms var(--ease-hud) infinite; }
/* workflow semantic states: pending ≈ dim, running ≈ active, error */
[data-flow] [data-node-state="pending"] [data-role="box"] { stroke: var(--maia-line-faint); }
[data-flow] [data-node-state="pending"] text { opacity: .55; }
[data-flow] [data-node-state="running"] [data-role="box"] { stroke: var(--maia-line-strong); }
[data-flow] [data-node-kind="maia"][data-node-state="running"] [data-role="box"] { stroke: var(--maia-cyan); }
[data-flow] [data-node-kind="maia"][data-node-state="running"] [data-role="glow"] { opacity: .18; }
[data-flow] [data-node-kind="agent"][data-node-state="running"] [data-role="glow"] { opacity: .07; }
[data-flow] [data-node-state="running"] [data-role="status"],
[data-flow] [data-node-state="running"] [data-role="dot"] { fill: var(--maia-cyan); }
[data-flow] [data-node-state="running"] [data-role="meta"] { fill: var(--maia-text-2); }
[data-flow] [data-node-state="error"] [data-role="box"] { stroke: rgba(255, 84, 112, .45); }
[data-flow] [data-node-state="error"] [data-role="status"],
[data-flow] [data-node-state="error"] [data-role="dot"] { fill: var(--maia-red); }

/* ---- Etapa 04 — layers (containers behind edges), infra abstractions, ports, tones ---- */
[data-flow] [data-node-kind="layer"] [data-role="box"] { fill: transparent; stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="layer"][data-node-emphasis] [data-role="box"] { fill: var(--maia-surface-2); stroke: var(--maia-line-strong); }
[data-flow] [data-node-kind="layer"][data-node-state="active"] [data-role="box"] { stroke: rgba(var(--maia-cyan-rgb), .55); }
[data-flow] [data-node-kind="layer"][data-node-state="dim"] [data-role="box"] { stroke: var(--maia-line-faint); }
[data-flow] [data-node-kind="layer"][data-node-state="dim"] text { opacity: .6; }
[data-flow] [data-node-kind="layer"] [data-role="label"],
[data-flow] [data-node-kind="layer"] [data-role="meta"] { font-family: var(--font-mono); font-weight: 600; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; fill: var(--maia-text-3); }
[data-flow] [data-node-kind="layer"][data-node-emphasis] [data-role="label"],
[data-flow] [data-node-kind="layer"][data-node-emphasis] [data-role="meta"] { fill: var(--maia-text-1); }
[data-flow] [data-node-kind="layer"] [data-role="status"] { letter-spacing: .18em; }
[data-flow] [data-node-kind="layer"] [data-role="corners"] { opacity: .6; }
/* tone colours only the status readout — colour keeps one meaning (green = local / available) */
[data-flow] [data-node-tone="green"] [data-role="status"] { fill: var(--maia-green); }
[data-flow] [data-node-tone="purple"] [data-role="status"] { fill: var(--maia-purple); }
/* infra: abstract infrastructure bars, no text, no invented services */
[data-flow] [data-node-kind="infra"] [data-role="box"] { fill: transparent; stroke: var(--maia-line-soft); stroke-dasharray: 2 3; }
/* port: invisible anchor on the SVG edge (a packet can enter from an HTML neighbour) */
[data-flow] [data-node-kind="port"] [data-role="box"],
[data-flow] [data-node-kind="port"] [data-role="glow"] { display: none; }

/* ---- Etapa 05 — Platform node variants (same palette, different eyebrow / border / geometry) ---- */
/* human: origin of a request — outlined, thin icon */
[data-flow] [data-node-kind="human"] [data-role="box"] { fill: transparent; stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="human"] [data-role="label"] { font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; fill: var(--maia-text-1); }
[data-flow] [data-node-kind="human"][data-node-state="active"] [data-role="box"] { stroke: rgba(var(--maia-cyan-rgb), .55); }
/* system: a functional region of the platform (providers, skills, MCP, computer…) — corner ticks, no colour */
[data-flow] [data-node-kind="system"] [data-role="box"] { fill: var(--maia-surface-1); stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="system"] [data-role="label"] { font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; fill: var(--maia-text-1); }
[data-flow] [data-node-kind="system"] [data-role="corners"] { opacity: .4; }
[data-flow] [data-node-kind="system"][data-node-state="active"] [data-role="glow"],
[data-flow] [data-node-kind="system"][data-node-state="running"] [data-role="glow"] { opacity: .06; }
[data-flow][data-flow-variant="mobile"] [data-node-kind="system"] [data-role="label"] { font-size: 9px; letter-spacing: .16em; }
/* mobile: a 56px stacked box still needs the label clear of the top-right status — shorter, tighter type */
[data-flow][data-flow-variant="mobile"] [data-node-kind="system"] [data-role="meta"],
[data-flow][data-flow-variant="mobile"] [data-node-kind="context"] [data-role="meta"] { font-size: 7.5px; }
[data-flow][data-flow-variant="mobile"] [data-node-kind="maia"] [data-role="status"] { font-size: 7px; letter-spacing: .1em; }
/* mobile provider chips + narrow agent nodes: a tighter status so long readouts stay inside 96–104px boxes */
[data-flow][data-flow-variant="mobile"] [data-node-kind="provider"] [data-role="status"],
[data-flow][data-flow-variant="mobile"] [data-node-kind="agent"] [data-role="status"] { font-size: 6.5px; letter-spacing: .1em; }
/* context: shared state — dashed outline, quieter type */
[data-flow] [data-node-kind="context"] [data-role="box"] { fill: transparent; stroke: var(--maia-line-soft); stroke-dasharray: 3 3; }
[data-flow] [data-node-kind="context"] [data-role="label"] { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; fill: var(--maia-text-2); }
[data-flow] [data-node-kind="context"][data-node-state="active"] [data-role="box"] { stroke: rgba(var(--maia-cyan-rgb), .5); }
/* result: aggregated output */
[data-flow] [data-node-kind="result"] [data-role="box"] { stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="result"] [data-role="label"] { font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; fill: var(--maia-text-1); }
[data-flow] [data-node-kind="result"][data-node-state="done"] [data-role="box"] { stroke: var(--maia-line-strong); }
/* emphasised agent (P04): the unit being assembled */
[data-flow] [data-node-kind="agent"][data-node-emphasis] [data-role="box"] { fill: var(--maia-surface-2); stroke: var(--maia-line-strong); }
[data-flow] [data-node-kind="agent"][data-node-emphasis] [data-role="label"] { font-size: 16px; }
[data-flow] [data-node-kind="agent"][data-node-emphasis] [data-role="meta"] { letter-spacing: .2em; }
[data-flow] [data-node-kind="agent"][data-node-emphasis][data-node-state="active"] [data-role="glow"] { opacity: .14; }
/* edge semantics — subtle: flow solid · context dashed · delegate labelled · return lighter, reversed */
[data-flow] [data-edge-kind="context"] [data-role="edge"] { stroke-dasharray: .03 .02; }
[data-flow] [data-edge-kind="context"][data-edge-state="hidden"] [data-role="edge"] { stroke-dashoffset: 0; opacity: 0; }
[data-flow] [data-edge-kind="delegate"] [data-role="edge"] { stroke: var(--maia-line-strong); }
[data-flow] [data-edge-kind="return"] [data-role="edge"] { stroke: var(--maia-line-soft); }
[data-flow] [data-edge-kind="return"] [data-role="arrow"] { stroke: var(--maia-line); }
[data-flow] [data-edge-kind="return"][data-edge-state="active"] [data-role="edge"] { stroke: rgba(var(--maia-cyan-rgb), .45); }
[data-flow] [data-edge-kind="return"][data-edge-state="done"] [data-role="edge"] { stroke: rgba(var(--maia-cyan-rgb), .22); }
[data-flow] [data-role="edge-label"] { font-size: 7px; letter-spacing: .16em; fill: var(--maia-text-4); text-anchor: middle; transition: fill var(--dur-base) var(--ease-hud), opacity var(--dur-base) var(--ease-hud); }
[data-flow] [data-edge-state="active"] [data-role="edge-label"] { fill: var(--maia-cyan); }
[data-flow] [data-edge-state="hidden"] [data-role="edge-label"] { opacity: 0; }

/* ---- Etapa 06 — pipeline steps, MCP servers, Payload presentation of DataPulse ---- */
/* step: one stage of a skill pipeline — glyph left, label + meta stacked, dot turns green when done */
[data-flow] [data-node-kind="step"] [data-role="box"] { fill: var(--maia-surface-1); stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="step"] [data-role="label"] { font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; fill: var(--maia-text-1); }
[data-flow] [data-node-kind="step"][data-node-state="running"] [data-role="glow"] { opacity: .07; }
[data-flow] [data-node-kind="step"][data-node-state="running"] [data-role="icon"] { opacity: 1; }
[data-flow] [data-node-kind="step"][data-node-state="done"] [data-role="box"] { stroke: var(--maia-line); }
/* mcp: a server speaking MCP — plug glyph, not a provider card */
[data-flow] [data-node-kind="mcp"] [data-role="box"] { fill: var(--maia-surface-1); stroke: var(--maia-line-soft); }
[data-flow] [data-node-kind="mcp"] [data-role="label"] { font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; fill: var(--maia-text-1); }
[data-flow] [data-node-kind="mcp"][data-node-state="dim"] [data-role="icon"] { opacity: .3; }
[data-flow] [data-node-kind="mcp"][data-node-state="active"] [data-role="box"],
[data-flow] [data-node-kind="mcp"][data-node-state="done"] [data-role="box"] { stroke: var(--maia-line-strong); }
[data-flow] [data-node-kind="mcp"][data-node-state="active"] [data-role="glow"],
[data-flow] [data-node-kind="mcp"][data-node-state="done"] [data-role="glow"] { opacity: .06; }
/* Payload: the same DataPulse path, but a tiny labelled packet when the unit of information has meaning */
[data-flow] [data-pulse-kind="payload"] [data-role="pulse-core"] { display: none; }
[data-flow] [data-pulse-kind="payload"] [data-role="pulse-glow"] { opacity: .16; }
[data-flow] [data-role="payload-box"] { fill: var(--maia-bg); stroke: var(--maia-cyan); stroke-width: 1; }
[data-flow] [data-role="payload-label"] { font-size: 6.5px; letter-spacing: .12em; fill: var(--maia-cyan); text-anchor: middle; }
[data-flow] [data-pulse-dir="back"] [data-role="payload-box"] { stroke: var(--maia-cyan-bright); }

/* ---- Etapa 10 — Pricing: entitlement gate. `locked` = not yet available (no colour: dashed hairline, dimmed);
   unlocking runs through the ordinary `running` → `done` states, so the release reads as a state change, not a hue. */
[data-flow] [data-node-state="locked"] [data-role="box"] { stroke: var(--maia-line-faint); stroke-dasharray: 3 3; }
[data-flow] [data-node-state="locked"] text { opacity: .5; }
[data-flow] [data-node-state="locked"] [data-role="status"] { opacity: .9; fill: var(--maia-text-3); letter-spacing: .2em; }
[data-flow] [data-node-state="locked"] [data-role="dot"] { fill: transparent; stroke: var(--maia-text-4); stroke-width: 1; }
[data-flow] [data-node-kind="step"][data-node-state="done"] [data-role="dot"] { fill: var(--maia-green); }