/* recite — flashcards styles. Owned by the flashcards phase. Tokens live in app.css :root; use them, do not redefine them. */

/* ============================== deck list ============================== */

.trc-fc-head { margin-bottom: var(--trc-s5); }
.trc-fc-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 2px; }

.trc-deck-list { list-style: none; margin: 0; padding: 0; }
.trc-deck + .trc-deck { margin-top: var(--trc-s2); }

.trc-deck-link {
  display: flex; align-items: center; gap: var(--trc-s3); flex-wrap: wrap;
  padding: var(--trc-s3) var(--trc-s4);
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow);
  color: var(--trc-text);
}
.trc-deck-link:hover { background: var(--trc-surface-hover); text-decoration: none; }

.trc-deck-name { flex: 1; min-width: 0; font-weight: 600; }
.trc-deck-counts { display: flex; align-items: center; gap: var(--trc-s2); flex-wrap: wrap; }

/* ================================ drill ================================ */

.trc-drill-head { margin: var(--trc-s3) 0 var(--trc-s5); }
.trc-drill-stats { display: flex; align-items: center; gap: var(--trc-s2); flex-wrap: wrap; margin: var(--trc-s2) 0; }
.trc-drill-opts  { display: flex; align-items: center; gap: var(--trc-s4); flex-wrap: wrap; font-size: 13px; }

.trc-drill-stage { margin-top: var(--trc-s4); }

.trc-fc-card { display: block; }
.trc-fc-meta  { margin: 0 0 var(--trc-s2); }

.trc-fc-front {
  margin: 0; text-align: center;
  font-size: 24px; font-weight: 700; line-height: 1.5;
}

.trc-fc-cloze p:last-child { margin-bottom: 0; }

.trc-fc-back {
  margin-top: var(--trc-s4);
  padding: var(--trc-s4);
  background: var(--trc-surface-sunk);
  border-radius: var(--trc-radius);
}
.trc-fc-answer      { max-width: none; }
.trc-fc-answer-head { margin: 0 0 var(--trc-s2); }
.trc-fc-answer .trc-chunk:last-child { margin-bottom: 0; }

.trc-fc-actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--trc-s2); flex-wrap: wrap;
  margin-top: var(--trc-s4);
}
.trc-fc-typed { margin-top: var(--trc-s3); text-align: center; }
.trc-fc-done  { font-size: 16px; font-weight: 600; margin-bottom: var(--trc-s3); }

.trc-rating { margin-top: var(--trc-s4); }
.trc-rating-again .trc-btn, .trc-btn.trc-rating-again { color: var(--trc-danger); }
.trc-btn.trc-rating-easy  { color: var(--trc-success); }

/* ============================== blanks ================================= */

.trc-blank-holder { display: inline; }

.trc-blank-input {
  display: inline-block; width: auto; min-width: 8em;
  min-height: 28px; padding: 2px 8px;
  font-size: inherit; font-family: inherit;
  vertical-align: baseline;
}
.trc-blank-input.is-wrong { border-color: var(--trc-danger); }

.trc-blank-mark { font-size: 13px; }
.trc-blank-mark.is-ok  { color: var(--trc-success); }
.trc-blank-mark.is-bad { color: var(--trc-danger); }

/* ===================== cloze creation (provision page) ================= */

.trc-fc-create { margin: var(--trc-s4) 0; }

.trc-fc-modal-title { font-size: 16px; font-weight: 700; margin: 0 0 var(--trc-s3); }
.trc-fc-modal-sub   { font-size: 13px; font-weight: 600; color: var(--trc-text-2); margin: var(--trc-s4) 0 var(--trc-s2); }

.trc-fc-tabs { display: flex; gap: var(--trc-s1); margin-bottom: var(--trc-s3); }

.trc-fc-pane { min-height: 60px; }

.trc-fc-hl {
  display: flex; align-items: flex-start; gap: var(--trc-s2);
  padding: var(--trc-s2);
  border-radius: var(--trc-radius-sm);
  cursor: pointer; font-size: 14px; line-height: 1.7;
}
.trc-fc-hl:hover  { background: var(--trc-surface-hover); }
.trc-fc-hl span   { background: var(--trc-hl-yellow); border-radius: 2px; }
.trc-fc-hl input  { margin-top: 6px; accent-color: var(--trc-accent); }

.trc-fc-blanklist { display: flex; flex-direction: column; gap: var(--trc-s1); }
.trc-fc-blankrow {
  display: flex; align-items: center; gap: var(--trc-s2);
  padding: var(--trc-s1) var(--trc-s2);
  background: var(--trc-surface-sunk);
  border-radius: var(--trc-radius-sm);
}
.trc-fc-blankquote { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }

.trc-fc-modal-actions {
  display: flex; justify-content: flex-end; gap: var(--trc-s2);
  margin-top: var(--trc-s5);
}

/* ============================== mobile ================================= */

@media (max-width: 640px) {
  .trc-fc-front { font-size: 20px; }
  .trc-rating .trc-btn { min-width: 0; }
  .trc-blank-input { min-width: 6em; }
}

/* ===== deck settings menu (separate from the drill surface) ===== */

.trc-fc-settings {
  margin: var(--trc-s3) 0;
  padding: var(--trc-s4);
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow);
  max-width: 420px;
}

.trc-fc-settings h3 { margin-bottom: 2px; }
.trc-fc-settings .trc-field:last-child { margin-bottom: 0; }
.trc-fc-settings .trc-select { max-width: 260px; }

/* The reversed card asks with the statute text, so give it reading measure. */
.trc-fc-card .trc-card-face .trc-reader,
.trc-fc-card .trc-fc-back .trc-reader {
  font-size: var(--trc-read-size);
  line-height: var(--trc-read-lh);
}