/* ORCH-107 flow canvas.
   Not a .razor.css: _Host.cshtml loads no Orch.Web.styles.css bundle, so scoped styles are never
   applied in this app. This follows the working skin.css / app.css / landing.css pattern.

   Borders read the MudTheme's palette variables so they cannot drift from MainLayout.razor. The
   four washes are the only literal colours here - tints of those same four palette entries. Node
   text is never coloured: #C1440E on its own wash measures 4.48:1 and #2F7D52 on its own measures
   4.44:1, both under the 4.5:1 AA floor. */

:root {
    --tt-flow-wash-ok: #EFF5F1;
    --tt-flow-wash-bad: #FBEDE9;
    --tt-flow-wash-run: #FDF0E9;
    --tt-flow-wash-idle: #F5F2EC;
}

.tt-flow {
    position: relative;
    overflow: auto;
    padding: 16px;
    background-color: var(--mud-palette-background);
    background-image: radial-gradient(var(--mud-palette-lines-default) 1px, transparent 1px);
    background-size: 20px 20px;
    border: var(--orch-hair);
    border-radius: 6px;
}

/* While a dependency change is in flight the canvas has already withdrawn its connectors and its
   live edges; this says so, so the pause reads as "working" rather than as the affordances having
   vanished. pointer-events stays on: the canvas is still scrollable and still readable. */
.tt-flow-busy {
    opacity: 0.6;
    cursor: progress;
}

.tt-flow-surface {
    position: relative;
}

.tt-flow-node {
    position: absolute;
    box-sizing: border-box;
    width: 200px;
    height: 60px;
    padding: 8px 11px;
    border: 1px solid var(--mud-palette-text-disabled);
    border-radius: 7px;
    background: var(--tt-flow-wash-idle);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 3px rgba(28, 24, 19, .07);
    cursor: default;
}

.tt-flow-node:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.tt-flow-node.tt-ok   { border-color: var(--mud-palette-success);       background: var(--tt-flow-wash-ok); }
.tt-flow-node.tt-bad  { border-color: var(--mud-palette-error);         background: var(--tt-flow-wash-bad); }
.tt-flow-node.tt-run  { border-color: var(--mud-palette-primary);       background: var(--tt-flow-wash-run); }
.tt-flow-node.tt-idle { border-color: var(--mud-palette-text-disabled); background: var(--tt-flow-wash-idle); }

/* A stub stands for a parent outside the drawn set. Dashed so it cannot be mistaken for a job you
   can act on, but present so the child is never shown as if nothing triggers it. */
.tt-flow-node.tt-stub {
    border-style: dashed;
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.tt-flow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tt-flow-name {
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-flow-meta {
    font-family: var(--orch-mono);
    font-size: .6875rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-flow-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.tt-flow-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid var(--mud-palette-text-disabled);
    border-radius: 99px;
    background: var(--tt-flow-wash-idle);
    color: var(--mud-palette-text-primary);
    font-size: .75rem;
}

.tt-flow-chip.tt-ok  { border-color: var(--mud-palette-success); background: var(--tt-flow-wash-ok); }
.tt-flow-chip.tt-bad { border-color: var(--mud-palette-error);   background: var(--tt-flow-wash-bad); }
.tt-flow-chip.tt-run { border-color: var(--mud-palette-primary); background: var(--tt-flow-wash-run); }

/* Same connect-mode treatment as a canvas node - box-shadow rather than a border-color change
   here, since a chip's border-color already carries run status. */
.tt-flow-chip.tt-source { box-shadow: 0 0 0 2px var(--mud-palette-primary); }

.tt-flow-chip.tt-targetable {
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--mud-palette-primary-lighten);
}

.tt-flow-empty {
    padding: 32px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* The edge layer sits behind the nodes and ignores the pointer, except on the strokes themselves
   - Task 6 makes those clickable to detach. */
.tt-flow-edges {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.tt-flow-edge {
    fill: none;
    stroke-width: 1.5;
}

.tt-cond-success { stroke: var(--mud-palette-success); }
.tt-cond-fail    { stroke: var(--mud-palette-error); }
.tt-cond-either  { stroke: var(--mud-palette-text-disabled); }

.tt-flow-edge-label {
    font-family: var(--orch-mono);
    font-size: 10px;
    fill: var(--mud-palette-text-secondary);
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--mud-palette-background);
    stroke-width: 3px;
}

.tt-flow-connector {
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    line-height: 1;
    cursor: pointer;
}

.tt-flow-node.tt-source { box-shadow: 0 0 0 2px var(--mud-palette-primary); }

.tt-flow-node.tt-targetable {
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--mud-palette-primary-lighten);
}

.tt-flow-conditions {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 3;
    display: flex;
    gap: 4px;
    padding: 4px;
    border: var(--orch-hair);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(28, 24, 19, .14);
}

.tt-cond-pick {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: .6875rem;
    padding: 3px 7px;
    cursor: pointer;
    white-space: nowrap;
}

.tt-flow-edge-live { cursor: pointer; stroke-width: 2.5; pointer-events: stroke; }

.tt-flow-node-error {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 2;
    width: 240px;
    padding: 5px 8px;
    border: 1px solid var(--mud-palette-error);
    border-radius: 5px;
    background: var(--tt-flow-wash-bad);
    color: var(--mud-palette-text-primary);
    font-size: .75rem;
}

/* ORCH-107 Task 7: a keyboard operator in connect mode needs to see, at a glance, which node is
   the target of Enter - the ordinary 2px ring (above) reads as plain focus, not as "this activates
   the gesture". */
.tt-flow-node.tt-targetable:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.tt-cond-pick:focus-visible,
.tt-flow-connector:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ORCH-107 Task 7: a chip is a connect source and target through the same keyboard gesture as a
   node (OnChipKey mirrors OnNodeKey), so it needs the same focus treatment - plain by default,
   unmistakable while it is this connect's target. */
.tt-flow-chip:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.tt-flow-chip.tt-targetable:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
}