/* ============================================================
   ck-ecl-correct (variant C) — self-correction / entity split
   Scoped under .ck-eclc. Obsidian & Ember palette.
   Signal green = resolved/corrected state ONLY; amber = conflict.
   ============================================================ */

.ck-eclc {
	--c-obsidian:#0F0D0C; --c-deep:#1A1614; --c-card:#251E1A; --c-border:#2E2520;
	--c-ember:#FF4E1F; --c-amber:#F0920A; --c-signal:#00FC88; --c-alert:#F0920A;
	--c-text:#E8E2DC; --c-muted:#B0A49E; --c-dim:#6f655e;

	position: relative; box-sizing: border-box;
	max-width: 1000px; margin: 0 auto;
	padding: clamp(24px, 4vw, 48px);
	background: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 24px 24px, var(--c-obsidian);
	border: 1px solid var(--c-border); border-radius: 14px;
	color: var(--c-text);
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	overflow: hidden;
}
.ck-eclc *, .ck-eclc *::before, .ck-eclc *::after { box-sizing: border-box; }

.ck-eclc__head { text-align: center; margin-bottom: clamp(14px, 2vw, 22px); }
.ck-eclc__title { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; color: #fff; }
.ck-eclc__sub { margin: 0 auto; max-width: 660px; font-size: clamp(13px, 1.4vw, 16px); line-height: 1.5; color: var(--c-muted); }

/* Status bar */
.ck-eclc__statusbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-bottom: 18px; text-align: center; }
.ck-eclc__phase { font-size: 13px; font-weight: 600; color: var(--c-text); }
.ck-eclc__status { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; white-space: nowrap; transition: .4s ease; }
.ck-eclc__status--neutral { color: var(--c-muted); background: rgba(255,255,255,.05); border: 1px solid var(--c-border); }
.ck-eclc__status--alert { color: var(--c-alert); background: rgba(240,146,10,.12); border: 1px solid rgba(240,146,10,.45); }
.ck-eclc__status--ok { color: var(--c-signal); background: rgba(0,252,136,.08); border: 1px solid rgba(0,252,136,.40); }

/* Incoming conflict record */
.ck-eclc__feed { max-width: 420px; margin: 0 auto 6px; }
.ck-eclc__rec { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: rgba(255,255,255,.03); border: 1px solid var(--c-border); border-radius: 8px; transition: opacity .45s ease, transform .45s ease, border-color .3s, background .3s; }
.ck-eclc__rec-src { flex: 0 0 auto; width: 46px; font-size: 10px; font-weight: 700; color: var(--c-ember); background: rgba(255,78,31,.10); border: 1px solid rgba(255,78,31,.30); border-radius: 4px; padding: 4px 0; text-align: center; }
.ck-eclc__rec-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ck-eclc__rec-name { font-size: 12px; font-weight: 600; color: var(--c-text); }
.ck-eclc__rec-detail { font-size: 10px; color: var(--c-muted); }
.ck-eclc__rec--in { background: rgba(240,146,10,.07); }
.ck-eclc__rec--in.is-conflict { border-color: rgba(240,146,10,.5); border-style: dashed; }
.ck-eclc__rec--in .ck-eclc__rec-src { color: #fff; background: var(--c-amber); border-color: var(--c-amber); }
.ck-eclc__arrow { text-align: center; color: var(--c-dim); font-size: 16px; margin-top: 6px; }

/* Entity stage */
.ck-eclc__stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; }
.ck-eclc__entity { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: linear-gradient(160deg, rgba(255,78,31,.10), rgba(240,146,10,.05)), var(--c-card); border: 1px solid rgba(255,78,31,.40); border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,78,31,.06), 0 8px 30px rgba(0,0,0,.35); transition: border-color .4s ease, box-shadow .4s ease; }
.ck-eclc__entity-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.ck-eclc__entity-lbl { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-amber); }
.ck-eclc__entity-name { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.05; }
.ck-eclc__entity-meta { font-size: 11px; color: var(--c-muted); }
.ck-eclc__recs { display: flex; flex-direction: column; gap: 6px; }

/* Relationship connector */
.ck-eclc__relate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; align-self: center; min-width: 96px; }
.ck-eclc__relate-line { width: 1px; flex: 1; min-height: 16px; background: rgba(0,252,136,.4); }
.ck-eclc__relate-badge { font-size: 9px; font-weight: 700; letter-spacing: .02em; text-align: center; color: var(--c-signal); background: rgba(0,252,136,.08); border: 1px solid rgba(0,252,136,.40); border-radius: 100px; padding: 4px 8px; line-height: 1.2; }

.ck-eclc__coda { text-align: center; margin: clamp(20px, 3vw, 30px) auto 0; max-width: 660px; font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; color: var(--c-muted); }

/* ============================================================
   ANIMATED MODE — JS adds .ck-eclc--anim then drives phases.
   Default (no JS / reduced motion) = corrected end-state above.
   ============================================================ */
/* Phase classes live on the root: .is-p1 / .is-p2 / .is-p3 */

/* incoming conflict record hidden until phase 2 */
.ck-eclc--anim .ck-eclc__rec--in { opacity: 0; transform: translateY(8px); }
.ck-eclc--anim.is-p2 .ck-eclc__rec--in,
.ck-eclc--anim.is-p3 .ck-eclc__rec--in { opacity: 1; transform: none; }

/* E2 + relationship hidden until phase 3 (the split) */
.ck-eclc--anim .ck-eclc__entity--new { opacity: 0; transform: translateX(-14px) scale(.96); }
.ck-eclc--anim.is-p3 .ck-eclc__entity--new { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
.ck-eclc--anim .ck-eclc__relate { opacity: 0; }
.ck-eclc--anim.is-p3 .ck-eclc__relate { opacity: 1; transition: opacity .5s ease .25s; }

/* record B sits in E1 during p1/p2, then is reassigned out on the split */
.ck-eclc--anim .ck-eclc__rec.is-reassign { transition: opacity .45s ease, transform .45s ease, max-height .45s ease; overflow: hidden; max-height: 60px; }
.ck-eclc--anim.is-p3 .ck-eclc__rec.is-reassign { opacity: 0; transform: translateX(20px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }

/* E1 name swaps from merged -> split label in phase 3 (handled by JS text) */

/* conflict pulse on E1 during phase 2 */
.ck-eclc--anim.is-p2 .ck-eclc__entity[data-entity="1"] { border-color: rgba(240,146,10,.7); box-shadow: 0 0 0 1px rgba(240,146,10,.20), 0 8px 30px rgba(0,0,0,.4); }
/* corrected ring on both entities in phase 3 */
.ck-eclc--anim.is-p3 .ck-eclc__entity { border-color: rgba(0,252,136,.45); box-shadow: 0 0 0 1px rgba(0,252,136,.12), 0 8px 30px rgba(0,0,0,.4); }

/* status colour by phase */
.ck-eclc--anim.is-p1 .ck-eclc__status { color: var(--c-muted); background: rgba(255,255,255,.05); border-color: var(--c-border); }
.ck-eclc--anim.is-p2 .ck-eclc__status { color: var(--c-alert); background: rgba(240,146,10,.12); border-color: rgba(240,146,10,.45); }
.ck-eclc--anim.is-p3 .ck-eclc__status { color: var(--c-signal); background: rgba(0,252,136,.08); border-color: rgba(0,252,136,.40); }

@media (max-width: 720px) {
	.ck-eclc__stage { grid-template-columns: 1fr; }
	.ck-eclc__relate { flex-direction: row; min-width: 0; }
	.ck-eclc__relate-line { width: auto; height: 1px; min-width: 16px; flex: 1; min-height: 0; }
	.ck-eclc--anim .ck-eclc__entity--new { transform: translateY(-14px) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
	.ck-eclc--anim .ck-eclc__rec--in,
	.ck-eclc--anim .ck-eclc__entity--new,
	.ck-eclc--anim .ck-eclc__relate { opacity: 1 !important; transform: none !important; }
	.ck-eclc--anim .ck-eclc__rec.is-reassign { display: none; }
}