/* ============================================================
   ck-ecl-learn (variant B) — resolution sharpens over time
   Scoped under .ck-ecll. Obsidian & Ember palette.
   Signal green = resolved/confident state ONLY.
   ============================================================ */

.ck-ecll {
	--c-obsidian:#0F0D0C; --c-deep:#1A1614; --c-card:#251E1A; --c-border:#2E2520;
	--c-ember:#FF4E1F; --c-amber:#F0920A; --c-signal:#00FC88;
	--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-ecll *, .ck-ecll *::before, .ck-ecll *::after { box-sizing: border-box; }

.ck-ecll__head { text-align: center; margin-bottom: clamp(16px, 2.4vw, 26px); }
.ck-ecll__title { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; color: #fff; }
.ck-ecll__sub { margin: 0 auto; max-width: 640px; font-size: clamp(13px, 1.4vw, 16px); line-height: 1.5; color: var(--c-muted); }

/* Ticker */
.ck-ecll__ticker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 20px; position: relative; }
.ck-ecll__ticker::before { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: var(--c-border); z-index: 0; }
.ck-ecll__tick { position: relative; z-index: 1; font-size: 10px; font-weight: 700; color: var(--c-dim); background: var(--c-deep); border: 1px solid var(--c-border); border-radius: 100px; padding: 5px 12px; white-space: nowrap; transition: .3s ease; }

/* Body grid: feed on top, entity + meter below */
.ck-ecll__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.2vw, 26px); align-items: start; }
.ck-ecll__feed { grid-column: 1 / -1; max-width: 460px; margin: 0 auto 4px; width: 100%; }

.ck-ecll__rec { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255,78,31,.06); border: 1px solid rgba(255,78,31,.30); border-radius: 8px; transition: opacity .45s ease, transform .45s ease; }
.ck-ecll__rec-src { flex: 0 0 auto; width: 52px; font-size: 10px; font-weight: 700; color: #fff; background: var(--c-ember); border-radius: 4px; padding: 5px 0; text-align: center; }
.ck-ecll__feats { display: flex; flex: 1 1 auto; gap: 8px; min-width: 0; }
.ck-ecll__feat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-ecll__feat-lbl { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); }
.ck-ecll__feat-val { font-size: 12px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-ecll__feat-val.is-empty { color: var(--c-dim); }
.ck-ecll__feed-step { position: absolute; top: -9px; right: 10px; font-size: 9px; font-weight: 700; color: var(--c-amber); background: var(--c-obsidian); padding: 1px 8px; border: 1px solid var(--c-border); border-radius: 100px; }
.ck-ecll__arrow { text-align: center; color: var(--c-dim); font-size: 16px; margin-top: 6px; }

/* Entity card */
.ck-ecll__entity { display: flex; flex-direction: column; gap: 10px; 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-ecll__entity-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.ck-ecll__entity-lbl { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-amber); }
.ck-ecll__entity-name { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.05; }
.ck-ecll__entity-count { font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.ck-ecll__entity-count b { color: #fff; font-size: 13px; }
.ck-ecll__grp { display: flex; flex-direction: column; gap: 5px; }
.ck-ecll__grp-lbl { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-dim); }
.ck-ecll__chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 20px; }
.ck-ecll__chip { font-size: 11px; font-weight: 600; color: var(--c-text); background: rgba(255,255,255,.05); border: 1px solid var(--c-border); border-radius: 5px; padding: 3px 8px; transition: opacity .4s ease, transform .4s ease, color .3s, border-color .3s, background .3s; }
.ck-ecll__chip-approx { color: var(--c-amber); font-weight: 800; }
.ck-ecll__chip.is-typo-chip { border-color: rgba(240,146,10,.45); }

/* Meter + log */
.ck-ecll__meter { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--c-deep); border: 1px solid var(--c-border); border-radius: 10px; align-self: stretch; }
.ck-ecll__meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.ck-ecll__meter-pct { font-size: 22px; font-weight: 800; color: var(--c-signal); letter-spacing: 0; text-transform: none; }
.ck-ecll__meter-track { height: 10px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; }
.ck-ecll__meter-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--c-ember), var(--c-amber)); transition: width .7s cubic-bezier(.4,0,.2,1); }
.ck-ecll__log { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 3px; }
.ck-ecll__log-lbl { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-dim); }
.ck-ecll__log-text { font-size: 12.5px; line-height: 1.4; color: var(--c-text); min-height: 34px; }

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

/* ── Animated mode ──────────────────────────────────────── */
.ck-ecll--anim .ck-ecll__tick { color: var(--c-dim); }
.ck-ecll--anim .ck-ecll__tick.is-active { color: #fff; border-color: var(--c-ember); background: rgba(255,78,31,.14); }
.ck-ecll--anim .ck-ecll__tick.is-done { color: var(--c-muted); }

.ck-ecll--anim .ck-ecll__rec--in { opacity: 0; transform: translateY(8px); }
.ck-ecll--anim .ck-ecll__rec--in.is-in { opacity: 1; transform: none; }

.ck-ecll--anim .ck-ecll__chip { opacity: 0; transform: translateY(4px); }
.ck-ecll--anim .ck-ecll__chip.is-in { opacity: 1; transform: none; }
.ck-ecll--anim .ck-ecll__chip.is-new { color: #fff; border-color: var(--c-ember); background: rgba(255,78,31,.14); }
.ck-ecll--anim .ck-ecll__chip.is-typo-chip.is-new { border-color: var(--c-amber); background: rgba(240,146,10,.16); }

.ck-ecll--anim .ck-ecll__entity.is-pulse { border-color: rgba(255,78,31,.7); box-shadow: 0 0 0 1px rgba(255,78,31,.18), 0 8px 30px rgba(0,0,0,.4); }
.ck-ecll--anim .ck-ecll__meter-fill { width: 0; }

@media (max-width: 720px) {
	.ck-ecll__body { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ck-ecll--anim .ck-ecll__rec--in,
	.ck-ecll--anim .ck-ecll__chip { opacity: 1 !important; transform: none !important; }
	.ck-ecll--anim .ck-ecll__meter-fill { width: var(--final-w, 97%); }
}