/* ══════════════════════════════════════════════════════════════
   THE EXCEPTION ENGINE  ·  v2
   15s loop, one case resolved in full per loop (rotates through
   three). Field of ~1,200 particles = financial events; a calm
   wave validates; three turn amber; one travels to the engine
   and plays its resolution: Detected → Auto-action → Assigned →
   Recovered · Closed.
   ══════════════════════════════════════════════════════════════ */

.xe{
  position:relative;width:100%;max-width:580px;margin:0 auto;
  aspect-ratio:1/.86;
  -webkit-user-select:none;user-select:none
}
.xe canvas{position:absolute;inset:0;width:100%;height:100%}

/* ── top status line ───────────────────────────────────────── */
.xe-top{position:absolute;top:0;left:0;right:0;text-align:center;pointer-events:none;z-index:2}
.xe-count{
  font-family:'Geist',system-ui,sans-serif;font-weight:300;
  font-size:clamp(21px,3vw,30px);letter-spacing:-.04em;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums
}
.xe-count.amber{color:#ff9d5c}
.xe-count.mint {color:#3df0b3}
.xe-label{
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);margin-top:8px;transition:color .6s ease
}
.xe-label.amber{color:rgba(255,157,92,.85)}
.xe-label.mint {color:rgba(61,240,179,.85)}

/* ── tiny in-field labels (dot IDs + exception names) ──────── */
.xe-tag{
  position:absolute;transform:translate(-50%,-140%);z-index:2;pointer-events:none;
  font-size:8.5px;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  padding:3px 7px;border-radius:5px;
  background:rgba(10,15,18,.88);border:1px solid var(--line);color:var(--muted);
  opacity:0;transition:opacity .5s ease
}
html[data-theme="light"] .xe-tag{background:rgba(255,255,255,.92)}
.xe-tag::after{
  content:'';position:absolute;left:50%;top:100%;width:1px;height:7px;
  background:var(--line);transform:translateX(-.5px)
}
.xe-tag.amber{
  color:#ff9d5c;border-color:rgba(255,157,92,.4);
  background:rgba(30,18,10,.9)
}
html[data-theme="light"] .xe-tag.amber{background:rgba(255,247,240,.95);color:#c05f21}
.xe-tag.amber::after{background:rgba(255,157,92,.4)}
.xe-tag.show{opacity:1}

/* ── the case card (centre) ────────────────────────────────── */
.xe-case{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) scale(.96);
  width:min(272px,74%);z-index:3;pointer-events:none;
  border-radius:14px;overflow:hidden;
  background:linear-gradient(155deg,rgba(19,27,31,.97),rgba(10,15,18,.97));
  border:1px solid rgba(255,157,92,.32);
  box-shadow:0 30px 64px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;
  transition:opacity .6s cubic-bezier(.32,.72,0,1),
             transform .6s cubic-bezier(.32,.72,0,1),
             border-color .8s ease
}
html[data-theme="light"] .xe-case{
  background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(245,248,247,.98));
  box-shadow:0 30px 64px -34px rgba(15,45,38,.4),inset 0 1px 0 rgba(255,255,255,.85)
}
.xe-case.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.xe-case.won{border-color:rgba(61,240,179,.5)}

.xe-case-head{
  display:flex;align-items:center;gap:12px;padding:13px 15px;
  border-bottom:1px solid var(--line)
}
.xe-case-head .amt{
  font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:19px;
  letter-spacing:-.035em;color:#ff9d5c;line-height:1;font-variant-numeric:tabular-nums;
  transition:color .8s ease
}
.xe-case.won .amt{color:#3df0b3}
.xe-case-head .txt{display:block;font-size:12px;font-weight:600;color:var(--text);line-height:1.25;letter-spacing:-.005em}
.xe-case-head .sub{display:block;font-size:9px;color:var(--muted-2);margin-top:2px;letter-spacing:.05em}

/* resolution steps */
.xe-steps{padding:9px 15px 12px}
.xe-stp{
  display:flex;align-items:center;gap:10px;padding:6.5px 0;
  opacity:.22;transition:opacity .55s ease
}
.xe-stp.on{opacity:1}
.xe-stp .ico{
  width:22px;height:22px;border-radius:7px;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted-2);
  transition:background .55s ease,border-color .55s ease,color .55s ease
}
html[data-theme="light"] .xe-stp .ico{background:rgba(10,35,28,.05)}
.xe-stp .ico svg{width:11px;height:11px}
.xe-stp.on .ico{
  background:rgba(255,157,92,.13);border-color:rgba(255,157,92,.42);color:#ff9d5c
}
.xe-stp.on.good .ico{
  background:rgba(61,240,179,.13);border-color:rgba(61,240,179,.45);color:#3df0b3
}
.xe-stp .lt{font-size:10.5px;font-weight:600;color:var(--text);line-height:1.2;letter-spacing:-.005em}
.xe-stp .ld{font-size:9px;color:var(--muted-2);margin-top:1.5px;line-height:1.25}
.xe-stp .chk{
  margin-left:auto;flex-shrink:0;width:15px;height:15px;border-radius:50%;
  display:grid;place-items:center;opacity:0;transform:scale(.4);
  background:rgba(61,240,179,.15);border:1px solid rgba(61,240,179,.5);
  transition:opacity .45s ease,transform .45s cubic-bezier(.32,1.4,.5,1)
}
.xe-stp .chk svg{width:8px;height:8px;color:#3df0b3}
.xe-stp.did .chk{opacity:1;transform:scale(1)}


@media(max-width:620px){
  .xe{aspect-ratio:1/1}
  .xe-case{width:84%}
  .xe-case-head .amt{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .xe-case,.xe-stp,.xe-tag{transition:none}
}