/* A topic: its name, the way to the cards and the quiz, and its words. */

.tp-head { display: flex; align-items: center; gap: 14px; }
.tp-icon {
  flex: none; width: 68px; height: 68px; display: grid; place-items: center;
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow);
  font-family: var(--emoji); font-size: 40px; line-height: 1;
}
.tp-titles { min-width: 0; }
.tp-name { margin: 0; font-size: 26px; }
.tp-es { margin: 0; color: var(--tc); font-size: 17px; font-weight: 600; }
.tp-progress { margin: 14px 2px; color: var(--muted); }

.tp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp-tip { margin-top: 14px; }

.tp-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tp-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px;
  padding: 10px 14px; border: none; border-radius: 16px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  text-align: start; cursor: pointer;
}
.tp-pic { flex: none; width: 42px; display: grid; place-items: center; }
.tp-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tp-es-word { align-self: flex-start; font-size: 19px; }
.tp-he { color: var(--muted); font-size: 15.5px; }

/* Where a word stands: not yet, learned, known, mastered. */
.tp-dot { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line); }
.st-learned { border-color: var(--c-saffron); background: var(--c-saffron); }
.st-known { border-color: var(--c-teal); background: var(--c-teal); }
.st-master { border-color: var(--accent); background: var(--accent); }