/* ============================================================
   DRILLS.CSS — reading and repairing
   ------------------------------------------------------------
   One question on screen at a time, and the code is the largest thing on it.
   Both modes are exercises in READING, so nothing competes with the listing:
   the prompt is one line under it, the answer box is plain, and the verdict
   only appears once there is one.
   ============================================================ */

.drill-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-body);
}

.drill-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}
.drill-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.drill-modes { display: flex; gap: 0.35rem; }
.drill-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.drill-mode:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.drill-mode.is-on {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: var(--color-primary);
}
.drill-mode svg { width: 13px; height: 13px; }
.drill-score {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.drill-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; }
.drill-card {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.drill-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  color: var(--text-tertiary);
}
.drill-count {
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.drill-file { display: inline-flex; align-items: center; gap: 0.25rem; }
.drill-file svg { width: 12px; height: 12px; }
.drill-from { margin-left: auto; font-style: italic; }

/* The listing. Line numbers in their own column so the eye can find the line
   the verdict names without counting. */
.drill-code {
  margin: 0;
  padding: 0.75rem 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-code, #0d1117);
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 0.82rem;
  line-height: 1.65;
  overflow-x: auto;
}
.drill-line { display: flex; }
.drill-ln {
  flex-shrink: 0;
  width: 2.6rem;
  padding-right: 0.75rem;
  text-align: right;
  color: var(--text-tertiary);
  opacity: 0.55;
  user-select: none;
}
.drill-lt { white-space: pre; padding-right: 1rem; }
/* Only ever shown after a wrong answer — before that, marking it would be the
   answer. */
.drill-line.is-bad {
  background: color-mix(in srgb, var(--color-danger, #ef4444) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--color-danger, #ef4444);
}

.drill-ask {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}
.drill-ask svg { width: 15px; height: 15px; color: var(--color-primary); flex-shrink: 0; }

.drill-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 0.85rem;
  line-height: 1.55;
  resize: vertical;
}
.drill-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.drill-input:disabled { opacity: 0.7; }

.drill-verdict {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}
.drill-verdict svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.drill-verdict strong { display: block; font-size: 0.86rem; }
.drill-verdict p { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.drill-verdict.is-ok {
  border-color: color-mix(in srgb, var(--color-success, #22c55e) 45%, transparent);
  background: color-mix(in srgb, var(--color-success, #22c55e) 10%, transparent);
}
.drill-verdict.is-ok svg, .drill-verdict.is-ok strong { color: var(--color-success, #22c55e); }
.drill-verdict.is-no {
  border-color: color-mix(in srgb, var(--color-danger, #ef4444) 45%, transparent);
  background: color-mix(in srgb, var(--color-danger, #ef4444) 10%, transparent);
}
.drill-verdict.is-no svg, .drill-verdict.is-no strong { color: var(--color-danger, #ef4444); }
/* The answer, shown only once it can no longer be the answer. */
.drill-want {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--bg-code, #0d1117);
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 0.78rem;
  white-space: pre-wrap;
  color: var(--text-primary);
  overflow-x: auto;
}

.drill-actions { display: flex; justify-content: flex-end; }

.drill-done {
  max-width: 460px;
  margin: 3rem auto;
  text-align: center;
  color: var(--text-secondary);
}
.drill-done svg { color: var(--color-primary); }
.drill-done h3 { margin: 0.75rem 0 0.35rem; font-size: 1.2rem; color: var(--text-primary); }
.drill-done p { margin: 0 0 1rem; font-size: 0.85rem; }

@media (max-width: 640px) {
  .drill-head { gap: 0.5rem; }
  .drill-title { width: 100%; order: -1; }
  .drill-modes { flex: 1; }
}