/* ARBEITSLOGIK — FRAME's shared Intelligence-to-Execution loop, in the same
   dark-canvas / node-edge grammar as the Reality Brain map and Finish Line,
   never a dashboard-card grid. */

.frame-loop-view { display: grid; gap: 18px; }

.frame-loop-canvas {
  position: relative;
  padding: 26px 24px 22px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(109,78,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(8,10,18,.94), rgba(5,6,12,.98));
}

.frame-loop-live-cues {
  margin: 0 0 18px;
  color: rgba(255,255,255,.45);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.frame-loop-stage-row { position: relative; }

.frame-loop-nodes {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.frame-loop-node-wrap { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 8px; }

/* Addressable connector segments between adjacent stages — replaces a single
   undifferentiated line so hover/focus/selection can light exactly the
   segment(s) touching a given stage (see setLit in frame-system-loop.js). */
.frame-loop-edge {
  flex: 0 1 40px;
  min-width: 12px;
  align-self: flex-start;
  margin-top: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(151,157,205,.4), rgba(151,157,205,.18));
  transition: background .2s ease, box-shadow .2s ease;
}
.frame-loop-edge.is-lit,
.frame-loop-edge.is-selected-adjacent {
  background: linear-gradient(90deg, rgba(173,162,255,.95), rgba(173,162,255,.6));
  box-shadow: 0 0 8px rgba(173,162,255,.45);
}

.frame-loop-node {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(13,15,22,.85);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.frame-loop-node:hover { border-color: rgba(173,162,255,.55); transform: translateY(-1px); }
.frame-loop-node:focus-visible { outline: 2px solid rgba(173,162,255,.85); outline-offset: 3px; }
.frame-loop-node.is-selected {
  border-color: rgba(255,164,78,.65);
  box-shadow: 0 0 0 1px rgba(255,164,78,.2), 0 0 26px rgba(255,145,49,.16);
}
.frame-loop-node-index { color: rgba(255,255,255,.4); font-size: 9px; letter-spacing: .12em; }
.frame-loop-node h3 { margin: 2px 0 0; font-size: 12.5px; }

.frame-loop-actors { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 2px; max-width: 160px; }
.frame-loop-actor {
  padding: 2px 7px;
  border: 1px solid rgba(128,205,164,.34);
  border-radius: 999px;
  background: rgba(64,150,110,.13);
  color: rgba(196,232,214,.88);
  font-size: 7.2px;
  letter-spacing: .04em;
}

.frame-loop-return { display: block; width: 100%; height: 22px; margin-top: 4px; overflow: visible; }
.frame-loop-return path { fill: none; stroke: rgba(151,157,205,.38); stroke-width: 1; stroke-dasharray: 3 5; transition: stroke .2s ease, stroke-width .2s ease; }
.frame-loop-return.is-lit path,
.frame-loop-return.is-selected-adjacent path { stroke: rgba(173,162,255,.95); stroke-width: 1.6; }
.frame-loop-return-label { margin: 6px 0 0; color: rgba(255,255,255,.4); font-size: 10px; text-align: center; }

.frame-loop-detail {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(11,14,18,.92);
}
.frame-loop-detail h3 { margin: 2px 0 8px; }
.frame-loop-detail > p { margin: 0 0 8px; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.55; }
.frame-loop-detail-row { margin-top: 12px; }

.frame-loop-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.frame-loop-chip {
  padding: 4px 10px;
  border: 1px solid rgba(155,144,255,.35);
  border-radius: 999px;
  background: rgba(88,72,200,.12);
  color: rgba(200,194,255,.9);
  font-size: 10px;
  transition: border-color .2s ease, background .2s ease;
}
.frame-loop-chip.is-lit { border-color: rgba(173,162,255,.9); background: rgba(88,72,200,.3); }

.frame-loop-internal {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(9,10,16,.55);
}
.frame-loop-internal > .eyebrow { margin-bottom: 2px; }
.frame-loop-internal-group p.frame-node-kicker { margin-bottom: 2px; }

@media (max-width: 900px) {
  .frame-loop-canvas { padding: 20px 16px 18px; }
  .frame-loop-nodes { flex-direction: column; align-items: stretch; }
  .frame-loop-node-wrap { width: 100%; }
  /* Keep the stack a connected process, not unrelated cards: each edge
     becomes a short vertical spine segment between the stacked nodes rather
     than being hidden outright. The curved return SVG assumes a horizontal
     row and doesn't translate, so it's hidden — but frame-loop-return-label
     (the "↺ ... zurück zu ORIENTIEREN" text) stays visible, so the loop
     meaning is never lost, only re-expressed as text instead of geometry. */
  .frame-loop-edge {
    align-self: center;
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    margin: 0;
    background: linear-gradient(180deg, rgba(151,157,205,.4), rgba(151,157,205,.18));
  }
  .frame-loop-edge.is-lit,
  .frame-loop-edge.is-selected-adjacent {
    background: linear-gradient(180deg, rgba(173,162,255,.95), rgba(173,162,255,.6));
  }
  .frame-loop-return { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .frame-loop-node { transition: none; }
}