/* =========================================================
   ICCE CONTROLLED PROCESSING SPINE
   ========================================================= */

.icce-processing-spine {
  --spine-ink:#27272a;
  --spine-text:#52525b;
  --spine-muted:#71717a;
  --spine-faint:#a1a1aa;
  --spine-line:#d4d4d8;
  --spine-line-soft:#e4e4e7;
  --spine-surface:#fafafa;
  --spine-surface-strong:#f4f4f5;
  --spine-green:#10b981;
  --spine-violet:#8b5cf6;
  container-type:inline-size;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:1.5rem;
  border:1px solid var(--spine-line-soft);
  border-radius:1.25rem;
  background:#fff;
  color:var(--spine-ink);
}

.icce-processing-spine *,
.icce-processing-spine *::before,
.icce-processing-spine *::after { box-sizing:border-box; }

.icce-processing-spine__topbar,
.icce-processing-spine__footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 1rem;
}

.icce-processing-spine__topbar { border-bottom:1px solid var(--spine-line-soft); }
.icce-processing-spine__footer { border-top:1px solid var(--spine-line-soft); }

.icce-processing-spine__live,
.icce-processing-spine__footer > div {
  display:flex;
  align-items:center;
  gap:.45rem;
}

.icce-processing-spine__live,
.icce-processing-spine__status,
.icce-processing-spine__footer {
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.icce-processing-spine__live { color:var(--spine-text); font-weight:700; }
.icce-processing-spine__status,
.icce-processing-spine__footer { color:var(--spine-faint); }

.icce-processing-spine__live-dot,
.icce-processing-spine__footer-dot {
  width:.38rem;
  height:.38rem;
  flex:0 0 auto;
  border-radius:999px;
}

.icce-processing-spine__live-dot {
  background:var(--spine-green);
  box-shadow:0 0 0 0 rgba(16,185,129,.28);
  animation:spine-live 2s ease-out infinite;
}

.icce-processing-spine__footer-dot { background:var(--spine-violet); }
.icce-processing-spine__canvas { position:relative; min-width:0; padding:1rem; }

.icce-processing-spine__origin {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .7rem;
  border:1px solid var(--spine-line-soft);
  border-radius:.7rem;
  background:#fff;
  opacity:.45;
  transform:translateY(2px);
  transition:opacity 220ms ease,transform 220ms ease,border-color 220ms ease;
}

.icce-processing-spine__origin.is-active {
  opacity:1;
  transform:translateY(0);
  border-color:var(--spine-line);
}

.icce-processing-spine__origin-dot {
  width:.45rem;
  height:.45rem;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--spine-line);
}

.icce-processing-spine__origin.is-active .icce-processing-spine__origin-dot { background:var(--spine-violet); }
.icce-processing-spine__origin > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .08rem;
}
.icce-processing-spine__origin small {
  margin: 0;
  padding: 0;
  color: var(--spine-faint);
  font-size: .45rem;
  line-height: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.icce-processing-spine__origin strong {
  margin: 0;
  padding: 0;
  color: var(--spine-text);
  font-size: .62rem;
  line-height: .8rem;
}

.icce-processing-spine__flow { position:relative; height:1.2rem; margin:.2rem 0 .35rem; }
.icce-processing-spine__flow-line { position:absolute; top:.58rem; left:2%; right:2%; height:1px; background:var(--spine-line-soft); }
.icce-processing-spine__flow-token {
  position:absolute;
  top:.35rem;
  left:0;
  width:.5rem;
  height:.5rem;
  border:1px solid var(--spine-faint);
  border-radius:999px;
  background:#fff;
  opacity:0;
}
.icce-processing-spine__flow-token.is-moving { opacity:1; animation:spine-token 8.2s linear forwards; }

.icce-processing-spine__layers {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--spine-line-soft);
  border-radius:.9rem;
  background:var(--spine-line-soft);
}

.icce-processing-layer {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 18.5rem;
  flex-direction: column;
  padding: .8rem;
  background: #fff;
  opacity: .43;
  transition:
    opacity 220ms ease,
    background-color 220ms ease;
}

.icce-processing-layer.is-active,
.icce-processing-layer.is-complete { opacity:1; }
.icce-processing-layer.is-active { background:var(--spine-surface); }

.icce-processing-layer__number {
  color:var(--spine-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.48rem;
}

.icce-processing-layer__head { margin-top:.4rem; }
.icce-processing-layer__head small { color:var(--spine-faint); font-size:.45rem; letter-spacing:.1em; text-transform:uppercase; }
.icce-processing-layer__head h3 { margin:.2rem 0 0; color:var(--spine-text); font-size:.64rem; line-height:.92rem; font-weight:700; }

.icce-processing-layer__checks,
.icce-processing-layer__states,
.icce-processing-layer__inputs,
.icce-processing-layer__branches,
.icce-processing-layer__observations {
  display:grid;
  gap:.34rem;
  margin-top:.72rem;
}

.icce-processing-layer__checks span,
.icce-processing-layer__states span,
.icce-processing-layer__inputs span,
.icce-processing-layer__branches span,
.icce-processing-layer__observations span,
.icce-processing-layer__subrail span,
.icce-processing-layer__payroll-grid span {
  display:flex;
  align-items:center;
  min-width:0;
  padding:.36rem .42rem;
  border:1px solid var(--spine-line-soft);
  border-radius:.48rem;
  background:#fff;
  color:var(--spine-faint);
  font-size:.46rem;
  line-height:.68rem;
  transition:color 180ms ease,border-color 180ms ease,background-color 180ms ease;
}

.icce-processing-layer__checks span::before,
.icce-processing-layer__inputs span::before,
.icce-processing-layer__branches span::before,
.icce-processing-layer__observations span::before {
  content:"";
  width:.28rem;
  height:.28rem;
  margin-right:.35rem;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--spine-line);
}

.icce-processing-layer__checks span.is-active,
.icce-processing-layer__states span.is-active,
.icce-processing-layer__inputs span.is-active,
.icce-processing-layer__branches span.is-active,
.icce-processing-layer__observations span.is-active,
.icce-processing-layer__subrail span.is-active,
.icce-processing-layer__payroll-grid span.is-active {
  color:var(--spine-text);
  border-color:var(--spine-line);
  background:var(--spine-surface);
}

.icce-processing-layer__checks span.is-complete::before,
.icce-processing-layer__inputs span.is-complete::before,
.icce-processing-layer__branches span.is-complete::before,
.icce-processing-layer__observations span.is-complete::before { background:var(--spine-green); }

.icce-processing-layer__states { position:relative; padding-left:.45rem; }
.icce-processing-layer__states::before {
  content:"";
  position:absolute;
  top:.2rem;
  bottom:.2rem;
  left:.13rem;
  width:1px;
  background:var(--spine-line-soft);
}

.icce-processing-layer__states span { position:relative; padding-left:.48rem; }
.icce-processing-layer__states span::before {
  content:"";
  position:absolute;
  left:-.52rem;
  width:.34rem;
  height:.34rem;
  border:1px solid var(--spine-line);
  border-radius:999px;
  background:#fff;
}
.icce-processing-layer__states span.is-active::before { border-color:var(--spine-violet); background:var(--spine-violet); }
.icce-processing-layer__states span.is-complete::before { border-color:var(--spine-faint); background:var(--spine-line); }

.icce-processing-layer__subrail,
.icce-processing-layer__payroll-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.25rem;
  margin-top:.55rem;
}
.icce-processing-layer__subrail { grid-template-columns:repeat(3,minmax(0,1fr)); }
.icce-processing-layer__subrail span,
.icce-processing-layer__payroll-grid span { justify-content:center; padding:.3rem .22rem; text-align:center; }
.icce-processing-layer__inputs { grid-template-columns:repeat(2,minmax(0,1fr)); }

.icce-processing-layer__rule-node {
  display:grid;
  min-height:2.6rem;
  margin-top:.55rem;
  place-items:center;
  border:1px solid var(--spine-line);
  border-radius:.58rem;
  background:var(--spine-surface);
  color:var(--spine-faint);
  font-size:.48rem;
  text-align:center;
  opacity:.45;
  transition:color 200ms ease,opacity 200ms ease,background-color 200ms ease;
}
.icce-processing-layer__rule-node.is-active { color:var(--spine-text); opacity:1; background:var(--spine-surface-strong); }
.icce-processing-layer__branches span { position:relative; }
.icce-processing-layer__caption { margin:.55rem 0 0; color:var(--spine-faint); font-size:.44rem; line-height:.68rem; }

.icce-processing-layer__trust-boundary {
  margin-top:.72rem;
  padding:.55rem;
  border:1px dashed var(--spine-line);
  border-radius:.62rem;
  background:var(--spine-surface);
}

.icce-processing-layer__instruction {
  padding:.42rem;
  border:1px solid var(--spine-line-soft);
  border-radius:.46rem;
  background:#fff;
  color:var(--spine-faint);
  font-size:.46rem;
  text-align:center;
}
.icce-processing-layer__instruction.is-active { color:var(--spine-text); border-color:var(--spine-line); }

.icce-processing-layer__trust-line { position:relative; height:.8rem; }
.icce-processing-layer__trust-line::before { content:""; position:absolute; top:.38rem; left:10%; right:10%; height:1px; background:var(--spine-line); }
.icce-processing-layer__trust-line span {
  position:absolute;
  top:.2rem;
  left:10%;
  width:.38rem;
  height:.38rem;
  border-radius:999px;
  opacity:0;
  background:var(--spine-violet);
}
.icce-processing-layer__trust-line span.is-moving { animation:spine-trust 1.2s ease-in-out forwards; }
.icce-processing-layer__observations { margin-top:0; }

.icce-processing-layer__output {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;

  width: 100%;
  margin-top: auto;
  padding: .7rem .42rem 0;


  color: var(--spine-faint);
  font-size: .46rem;
  text-align: center;
  opacity: .5;
}
.icce-processing-layer__output.is-active { color:var(--spine-text); opacity:1; }

.icce-processing-layer__evidence-link {
  position:absolute;
  right:50%;
  bottom:-1.15rem;
  width:1px;
  height:1.15rem;
  background:var(--spine-line-soft);
}
.icce-processing-layer__evidence-link span {
  position:absolute;
  bottom:0;
  left:-2px;
  width:5px;
  height:5px;
  border-radius:999px;
  background:var(--spine-line);
  opacity:.4;
}
.icce-processing-layer.is-complete .icce-processing-layer__evidence-link { background:var(--spine-line); }
.icce-processing-layer.is-complete .icce-processing-layer__evidence-link span { background:var(--spine-green); opacity:1; }

.icce-evidence-rail {
  position:relative;
  margin-top:1.15rem;
  padding:.8rem;
  border:1px solid var(--spine-line-soft);
  border-radius:.78rem;
  background:var(--spine-surface);
}
.icce-evidence-rail__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  color:var(--spine-faint);
  font-size:.48rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.icce-evidence-rail__head code { font-size:.46rem; }
.icce-evidence-rail__line { position:relative; height:.75rem; }
.icce-evidence-rail__line::before { content:""; position:absolute; top:.35rem; left:2%; right:2%; height:1px; background:var(--spine-line); }
.icce-evidence-rail__trace {
  position:absolute;
  top:.12rem;
  right:2%;
  width:.45rem;
  height:.45rem;
  border-radius:999px;
  opacity:0;
  background:var(--spine-violet);
}
.icce-evidence-rail__trace.is-tracing { animation:spine-lineage 1.65s ease-in-out forwards; }

.icce-evidence-rail__records { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.4rem; }
.icce-evidence-record {
  display:flex;
  align-items:center;
  gap:.35rem;
  min-width:0;
  padding:.38rem .42rem;
  border:1px solid var(--spine-line-soft);
  border-radius:.48rem;
  background:#fff;
  opacity:.35;
  transform:translateY(2px);
  transition:opacity 180ms ease,transform 180ms ease,border-color 180ms ease;
}
.icce-evidence-record.is-visible { opacity:1; transform:translateY(0); border-color:var(--spine-line); }
.icce-evidence-record > span { width:.3rem; height:.3rem; flex:0 0 auto; border-radius:999px; background:var(--spine-line); }
.icce-evidence-record.is-visible > span { background:var(--spine-green); }
.icce-evidence-record small { overflow:hidden; color:var(--spine-muted); font-size:.43rem; text-overflow:ellipsis; white-space:nowrap; }

.icce-processing-spine__reconciliation {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:1.2rem;
  margin-top:.65rem;
  opacity:.35;
  transition:opacity 180ms ease;
}
.icce-processing-spine__reconciliation.is-active { opacity:1; }
.icce-processing-spine__reconciliation-line { position:absolute; top:.55rem; right:9%; left:69%; height:1px; background:var(--spine-line); }
.icce-processing-spine__reconciliation-pulse {
  position:absolute;
  top:.33rem;
  right:9%;
  width:.42rem;
  height:.42rem;
  border-radius:999px;
  opacity:0;
  background:var(--spine-violet);
}
.icce-processing-spine__reconciliation-pulse.is-moving { animation:spine-reconcile 1.15s ease-in-out forwards; }
.icce-processing-spine__reconciliation small { color:var(--spine-faint); font-size:.44rem; }
.icce-processing-spine__footer code { color:var(--spine-faint); font-size:.5rem; }

@container (max-width:620px) {
  .icce-processing-spine__status { display:none; }
  .icce-processing-spine__canvas { padding:.85rem; }
  .icce-processing-spine__flow { display:none; }
  .icce-processing-spine__layers { grid-template-columns:1fr; margin-top:.75rem; }
  .icce-processing-layer {
    min-height: auto;
    padding: .9rem .9rem .9rem 2.7rem;
  }
  .icce-processing-layer::before { content:""; position:absolute; top:0; bottom:0; left:1.25rem; width:1px; background:var(--spine-line-soft); }
  .icce-processing-layer__number {
    position:absolute;
    top:.92rem;
    left:.6rem;
    display:grid;
    width:1.3rem;
    height:1.3rem;
    place-items:center;
    border:1px solid var(--spine-line);
    border-radius:999px;
    background:#fff;
  }
  .icce-processing-layer.is-complete .icce-processing-layer__number { background:var(--spine-surface-strong); }
  .icce-processing-layer__output {
    position: static;
    width: 100%;
    margin-top: .11rem;
    padding-top: .7rem;
  }
  .icce-processing-layer__evidence-link { right:auto; bottom:50%; left:1.25rem; width:1.45rem; height:1px; }
  .icce-processing-layer__evidence-link span { top:-2px; right:0; bottom:auto; left:auto; }
  .icce-evidence-rail { margin-top:.75rem; }
  .icce-evidence-rail__line { display:none; }
  .icce-evidence-rail__records { grid-template-columns:1fr; margin-top:.55rem; }
  .icce-evidence-record small { white-space:normal; }
  .icce-processing-spine__reconciliation { justify-content:flex-start; padding-left:1.1rem; }
  .icce-processing-spine__reconciliation-line { right:auto; left:.2rem; width:.5rem; }
  .icce-processing-spine__reconciliation-pulse { right:auto; left:.2rem; }
}

@container (max-width:390px) {
  .icce-processing-layer__inputs,
  .icce-processing-layer__payroll-grid,
  .icce-processing-layer__subrail { grid-template-columns:1fr; }
  .icce-processing-spine__footer code { display:none; }
}

@keyframes spine-live {
  0% { box-shadow:0 0 0 0 rgba(16,185,129,.28); }
  70% { box-shadow:0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow:0 0 0 0 rgba(16,185,129,0); }
}
@keyframes spine-token { from { left:0; } to { left:calc(100% - .5rem); } }
@keyframes spine-trust {
  0% { left:10%; opacity:0; }
  15%,85% { opacity:1; }
  100% { left:calc(90% - .38rem); opacity:0; }
}
@keyframes spine-lineage {
  0% { right:2%; opacity:0; }
  15%,85% { opacity:1; }
  100% { right:calc(98% - .45rem); opacity:0; }
}
@keyframes spine-reconcile {
  0% { right:9%; opacity:0; }
  15%,85% { opacity:1; }
  100% { right:30%; opacity:0; }
}

@media (prefers-reduced-motion:reduce) {
  .icce-processing-spine *,
  .icce-processing-spine *::before,
  .icce-processing-spine *::after {
    animation:none !important;
    transition:none !important;
  }
}