/* Agent J · ecranul „Ce a învățat Alice” (frontend/js/ecrane/invatare.js). Doar tokenuri din tokens.css. */
.j-prop-cap { gap: 4px; }
.j-ver { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--dim); padding: 2px 8px;
  border: 1px solid var(--hair); border-radius: var(--radius-pill); margin-left: 6px; white-space: nowrap; }
.j-ver--activ { color: var(--ok); border-color: currentColor; }
.j-diff { display: flex; flex-direction: column; }
.j-schimbare { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--hair-row); }
.j-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cream); white-space: pre-wrap; overflow-wrap: anywhere; }
.j-del { color: var(--alert-ink); background: var(--alert-surface); text-decoration: line-through; text-decoration-thickness: 1.5px; border-radius: 3px; padding: 0 2px; }
.j-ins { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); text-decoration: none; border-radius: 3px; padding: 0 2px; }
.j-op { font-weight: 600; }
.j-op--adaugat { color: var(--ok); }
.j-op--eliminat { color: var(--alert-ink); }
.j-op--modificat { color: var(--flux-yellow-ink); }
.j-prop-jos { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.j-bat { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.j-bat--ok { color: var(--ok); }
.j-bat--picat { color: var(--alert-ink); }
.j-bat--asteapta { color: var(--dim); max-width: 60ch; }
.j-esecuri { margin: 6px 0 0; padding-left: 20px; font-size: 13px; color: var(--dim); }
.j-lant { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-card); border: 1px solid var(--hair-card); }
.j-lant--ok { color: var(--ok); }
.j-lant--rupt { color: var(--alert-ink); background: var(--alert-surface); border-color: var(--alert-line); }
.j-lant .pa-meta { margin-left: auto; }
.j-nr { width: 32px; flex: none; font-family: var(--font-mono); color: var(--dim); text-align: right; }
@media (max-width: 720px) { .j-prop-jos { flex-direction: column; align-items: flex-start; } }