/* Read Java: spaced review and mixed practice.
 * Colors come from the variables at the top of style.css. */

.rj-practice-bar { margin: 0 0 2.25rem; }

.rj-practice-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.rj-practice-actions .btn {
  justify-content: flex-start;
  min-height: 60px;
  padding: .9rem 1.1rem;
  font-size: 1.05rem;
  border-radius: var(--radius);
}
.rj-practice-bar .rj-mix-btn,
.rj-review-btn.rj-quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.rj-practice-bar .rj-mix-btn:hover,
.rj-review-btn.rj-quiet:hover {
  border-color: var(--accent);
  opacity: 1;
}

.rj-practice-meta {
  margin: .6rem 0 0;
  font-size: .9rem;
  color: var(--muted);
}

.rj-backup { margin-top: .4rem; font-size: .9rem; }
.rj-backup summary { cursor: pointer; color: var(--accent); }
.rj-backup label { display: block; margin-top: .6rem; font-weight: 700; }
.rj-backup textarea {
  width: 100%;
  font-family: var(--font-mono), monospace;
  font-size: .85em;
  margin: .3em 0;
  padding: .5rem;
}

.rj-badge {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 400;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rj-topic-note { margin-top: 1em; font-size: .9em; color: var(--muted); }

/* question view in review / mixed mode */
.rj-practice-mode #shuffleQuestionsBtn,
.rj-practice-mode #copyTopicLink { display: none; }

.rj-source {
  margin: 1em 0 0;
  padding: .55em .8em;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 6px 6px 0;
  font-size: .9em;
}

.rj-session-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25em;
  padding-top: .75em;
  border-top: 1px solid var(--line);
  font-size: .95em;
  color: var(--muted);
}

/* setup page */
.rj-chapters, .rj-length {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 1em 0;
  padding: .75em 1em;
  min-width: 0;
}
.rj-chapters legend, .rj-length legend { font-weight: 700; color: var(--ink); padding: 0 .3em; }
.rj-quick { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; margin-bottom: .6em; font-size: .9em; }
.rj-quick select { margin-left: .3em; max-width: 16em; padding: .35rem; }
.btn.rj-small { min-height: 34px; padding: .2em .8em; font-size: .85em; }
.rj-chapter { display: flex; gap: .6rem; align-items: center; padding: .3em 0; min-height: 36px; }
.rj-chapter input, .rj-length input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.rj-length label { margin-right: 1.2em; display: inline-flex; gap: .4rem; align-items: center; min-height: 36px; }
.rj-note { font-style: italic; color: var(--muted); }
.rj-error { color: var(--bad); min-height: 1.2em; }

/* results */
.rj-summary { margin: 1em 0; }
.rj-summary-table { border-collapse: collapse; margin: 1em 0; width: 100%; max-width: 560px; font-variant-numeric: tabular-nums; }
.rj-summary-table th, .rj-summary-table td { text-align: left; padding: .45em .6em; border-bottom: 1px solid var(--line); }
.rj-summary-table thead th { color: var(--ink); border-bottom: 2px solid var(--ink); }
.rj-summary-actions { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1em; }
.rj-revisit li { margin: .3em 0; }

#rjSetupTitle:focus, #rjSummaryTitle:focus { outline: none; }

/* mixed practice options */
.rj-options .rj-option { display: flex; gap: .5rem; align-items: center; margin: .4em 0 0; font-weight: 700; color: var(--ink); }
.rj-options select { display: block; width: 100%; max-width: 26rem; padding: .45rem; margin-top: .3rem; }
.rj-option-note { margin: .25em 0 .9em; font-size: .88rem; color: var(--muted); }

/* code patterns shown after a check (concepts.js) */
.rj-concepts { margin-top: .9rem; font-size: .9rem; color: var(--muted); }
.rj-concepts-label { margin-right: .3rem; }
.rj-chip {
  min-height: 0;
  padding: .15rem .65rem;
  margin: .15rem .2rem .15rem 0;
  font: inherit;
  font-weight: 700;
  font-size: .85rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.rj-chip:hover, .rj-chip[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); opacity: 1; }
.rj-concept-detail { margin-top: .5rem; color: var(--text); }
.rj-concept-detail p { margin: 0 0 .5rem; }
.rj-concept-detail pre { font-size: 13px; margin: 0; }

/* Code Glance (multiple-choice-widget.js) */
.rj-glance {
  margin: .5rem 0 1rem;
  padding: .75rem 1rem;
  background: var(--surface-2);
  border-radius: 6px;
}
.rj-glance-msg { margin: 0 0 .6rem; }
.rj-glance .link-button { margin-left: .75rem; font-size: .88rem; }
.rj-glance-bar { height: 6px; margin: 0 0 .6rem; background: var(--line); border-radius: 3px; overflow: hidden; }
.rj-glance-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transition-property: width; transition-timing-function: linear; }
.rj-glance-hidden {
  margin: 0 0 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--muted);
  border: 1.5px dashed var(--line);
  border-radius: 6px;
}
.rj-glance-note { font-size: .88rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .rj-glance-bar span { transition: none !important; }
}