/* ICCE stakeholder identity engine */

.icce-identity-engine {
  --identity-ink:#27272a;
  --identity-text:#52525b;
  --identity-muted:#71717a;
  --identity-faint:#a1a1aa;
  --identity-line:#d4d4d8;
  --identity-line-soft:#e4e4e7;
  --identity-surface:#fafafa;
  --identity-green:#10b981;
  --identity-violet:#8b5cf6;

  container-type:inline-size;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:1.5rem;
  border:1px solid var(--identity-line-soft);
  border-radius:1.25rem;
  background:#fff;
  color:var(--identity-ink);
}

.icce-identity-engine *,
.icce-identity-engine *::before,
.icce-identity-engine *::after { box-sizing:border-box; }

.icce-identity-engine__topbar,
.icce-identity-engine__footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 1rem;
}

.icce-identity-engine__topbar { border-bottom:1px solid var(--identity-line-soft); }

.icce-identity-engine__live,
.icce-identity-engine__footer > div {
  display:flex;
  align-items:center;
  gap:.45rem;
}

.icce-identity-engine__live,
.icce-identity-engine__status,
.icce-identity-engine__footer {
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.icce-identity-engine__live {
  color:var(--identity-text);
  font-weight:700;
}

.icce-identity-engine__status,
.icce-identity-engine__footer { color:var(--identity-faint); }

.icce-identity-engine__live-dot,
.icce-identity-engine__footer-dot {
  width:.38rem;
  height:.38rem;
  flex:0 0 auto;
  border-radius:999px;
}

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

.icce-identity-engine__footer-dot { background:var(--identity-violet); }

.icce-identity-engine__section,
.icce-access-routing { padding:1rem; }

.icce-identity-engine__section { border-bottom:1px solid var(--identity-line-soft); }

.icce-identity-engine__label {
  margin:0 0 .75rem;
  color:var(--identity-faint);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.icce-market-chain {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;
}

.icce-market-chain__line {
  position:absolute;
  top:.78rem;
  right:10%;
  left:10%;
  height:1px;
  background:var(--identity-line);
}

.icce-party {
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  min-width:0;
  text-align:center;
}

.icce-party__dot {
  width:1.55rem;
  height:1.55rem;
  border:1px solid var(--identity-line);
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 0 4px #fff;
  transition:border-color 240ms ease,background-color 240ms ease;
}

.icce-party strong {
  margin-top:.45rem;
  color:var(--identity-text);
  font-size:.65rem;
  line-height:1rem;
}

.icce-party small {
  overflow:hidden;
  max-width:100%;
  color:var(--identity-faint);
  font-size:.5rem;
  line-height:.8rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.icce-party.is-verified .icce-party__dot {
  border-color:var(--identity-green);
  background:var(--identity-green);
  box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(16,185,129,.18);
}

.icce-market-chain__note {
  margin:.8rem 0 0;
  color:var(--identity-faint);
  font-size:.52rem;
  text-align:center;
}

.icce-identity-engine__body {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-bottom:1px solid var(--identity-line-soft);
}

.icce-identity-process,
.icce-platform-ids {
  min-width:0;
  padding:1rem;
}

.icce-identity-process { border-right:1px solid var(--identity-line-soft); }

.icce-identity-process__rail {
  position:relative;
  display:grid;
  gap:.55rem;
}

.icce-identity-process__line {
  position:absolute;
  top:.8rem;
  bottom:.8rem;
  left:.8rem;
  width:1px;
  background:var(--identity-line);
}

.icce-identity-step {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.65rem;
  opacity:.45;
  transform:translateX(-3px);
  transition:opacity 240ms ease,transform 240ms ease;
}

.icce-identity-step__node {
  display:grid;
  width:1.6rem;
  height:1.6rem;
  flex:0 0 auto;
  place-items:center;
  border:1px solid var(--identity-line);
  border-radius:999px;
  background:#fff;
  color:var(--identity-muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.46rem;
  transition:color 240ms ease,border-color 240ms ease,background-color 240ms ease;
}

.icce-identity-step > div,
.icce-platform-id > div,
.icce-access-output > div {
  display:grid;
  min-width:0;
}

.icce-identity-step strong { color:var(--identity-text); font-size:.61rem; }

.icce-identity-step small {
  overflow:hidden;
  color:var(--identity-faint);
  font-size:.5rem;
  line-height:.8rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.icce-identity-step.is-active,
.icce-identity-step.is-complete {
  opacity:1;
  transform:translateX(0);
}

.icce-identity-step.is-active .icce-identity-step__node {
  border-color:var(--identity-muted);
  background:var(--identity-surface);
}

.icce-identity-step.is-complete .icce-identity-step__node {
  border-color:var(--identity-faint);
  background:var(--identity-line-soft);
  color:var(--identity-text);
}

.icce-platform-ids__head,
.icce-access-routing__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.icce-platform-ids__head > span,
.icce-access-routing__head > span {
  color:var(--identity-faint);
  font-size:.5rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.icce-platform-ids__list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.4rem;
}

.icce-platform-id {
  display:flex;
  align-items:center;
  gap:.45rem;
  min-width:0;
  padding:.48rem .55rem;
  opacity:.32;
  border:1px solid var(--identity-line-soft);
  border-radius:.65rem;
  background:#fff;
  transform:translateY(3px);
  transition:opacity 240ms ease,transform 240ms ease,background-color 240ms ease;
}

.icce-platform-id.is-visible {
  opacity:1;
  transform:translateY(0);
  background:var(--identity-surface);
}

.icce-platform-id__signal {
  width:.36rem;
  height:.36rem;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--identity-line);
}

.icce-platform-id.is-visible .icce-platform-id__signal { background:var(--identity-green); }

.icce-platform-id small { color:var(--identity-faint); font-size:.46rem; }

.icce-platform-id code {
  overflow:hidden;
  color:var(--identity-text);
  font-size:.58rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.icce-connection {
  display:grid;
  grid-template-columns:auto minmax(2.5rem,1fr) auto;
  align-items:center;
  gap:.5rem;
  margin-top:.65rem;
  padding:.65rem;
  opacity:.45;
  border-top:1px solid var(--identity-line-soft);
  transition:opacity 240ms ease;
}

.icce-connection.is-active { opacity:1; }

.icce-connection__party { display:grid; }

.icce-connection__party span {
  color:var(--identity-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.52rem;
}

.icce-connection__party small { color:var(--identity-faint); font-size:.44rem; }

.icce-connection__route {
  position:relative;
  height:1px;
  background:var(--identity-line);
}

.icce-connection__pulse {
  position:absolute;
  top:-2px;
  left:0;
  width:5px;
  height:5px;
  border-radius:999px;
  opacity:0;
  background:var(--identity-violet);
}

.icce-connection.is-active .icce-connection__pulse {
  animation:identity-connect 1.15s ease-in-out forwards;
}

.icce-connection__status {
  margin:.1rem 0 0;
  color:var(--identity-faint);
  font-size:.48rem;
  text-align:center;
}

.icce-access-routing { border-bottom:1px solid var(--identity-line-soft); }

.icce-access-routing__grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.45rem;
}

.icce-access-output {
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
  padding:.6rem;
  opacity:.35;
  border:1px solid var(--identity-line-soft);
  border-radius:.7rem;
  background:#fff;
  transform:translateY(4px);
  transition:opacity 240ms ease,transform 240ms ease,border-color 240ms ease,background-color 240ms ease;
}

.icce-access-output.is-active {
  opacity:1;
  transform:translateY(0);
  border-color:var(--identity-line);
  background:var(--identity-surface);
}

.icce-access-output__icon {
  display:grid;
  width:1.75rem;
  height:1.75rem;
  flex:0 0 auto;
  place-items:center;
  border:1px solid var(--identity-line);
  border-radius:.55rem;
  color:var(--identity-muted);
  background:#fff;
}

.icce-access-output__icon svg { width:1rem; height:1rem; }

.icce-access-output strong {
  overflow:hidden;
  color:var(--identity-text);
  font-size:.55rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.icce-access-output small {
  color:var(--identity-faint);
  font-size:.45rem;
  line-height:.72rem;
}

.icce-identity-engine__footer code {
  color:var(--identity-faint);
  font-size:.5rem;
}

@container (max-width:560px) {
  .icce-identity-engine__status { display:none; }

  .icce-market-chain {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
  }

  .icce-market-chain__line { display:none; }

  .icce-party {
    min-height:4.5rem;
    padding:.7rem;
    border:1px solid var(--identity-line-soft);
    border-radius:.75rem;
    background:#fff;
  }

  .icce-party__dot,
  .icce-party.is-verified .icce-party__dot { box-shadow:none; }

  .icce-identity-engine__body { grid-template-columns:1fr; }

  .icce-identity-process {
    border-right:0;
    border-bottom:1px solid var(--identity-line-soft);
  }

  .icce-platform-ids__list { grid-template-columns:1fr; }

  .icce-access-routing__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .icce-access-output { align-items:flex-start; }
}

@container (max-width:360px) {
  .icce-access-routing__grid { grid-template-columns:1fr; }
  .icce-identity-engine__footer code { display:none; }
}

@keyframes identity-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 identity-connect {
  0% { left:0; opacity:0; }
  15% { opacity:1; }
  85% { opacity:1; }
  100% { left:calc(100% - 5px); opacity:0; }
}

@media (prefers-reduced-motion:reduce) {
  .icce-identity-engine * {
    animation:none !important;
    transition:none !important;
  }
}