/* C5: my phrases (#/fraze), today card on the home screen, Training (#/trenink…). */
.today-card.has-todo { border-color: var(--accent); border-width: 2px; }

.phrase-form { display: grid; gap: 8px; }
.phrase-list .phrase { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.phrase-info { display: grid; gap: 2px; min-width: 0; }
.phrase-info .en { font-weight: 600; overflow-wrap: anywhere; }
.phrase-info small { display: block; }
.phrase-info .due.today { color: var(--accent); font-weight: 600; }
.phrase-actions { display: flex; gap: 4px; flex-shrink: 0; }
.phrase-list .phrase form { width: 100%; }

.train-progress { display: grid; gap: 4px; margin: 8px 0 12px; }
.train-progress .bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.train-progress .bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }

.train-item { display: grid; gap: 8px; }
.train-item .cs { font-size: 1.15rem; margin: 0; }
.train-item .en { font-size: 1.3rem; font-weight: 700; margin: 0; line-height: 1.35; transition: filter 0.2s; }
.train-item .en.veiled { filter: blur(7px); user-select: none; -webkit-user-select: none; }
.train-item .link { justify-self: start; padding: 0; }

.train-result { min-height: 1em; }
.train-result .verdict { font-weight: 700; margin: 0 0 6px; text-align: center; }
.train-result .verdict.ok { color: var(--accent); }
.train-result .verdict.retry { color: var(--error); }
.train-result .words { text-align: center; font-size: 1.15rem; margin: 0 0 6px; }
.train-result .words .ok { color: var(--accent); }
.train-result .words .miss { color: var(--error); text-decoration: underline wavy; text-underline-offset: 4px; }
.train-result p.small { text-align: center; }
.coach-training { margin-top: 12px; }