/* Typing Tutor — drill & keyboard styles.
 * Plain CSS (no Tailwind build pipeline). Text/semantic colors use the daisyUI
 * theme variables from default.css so they stay legible in both the light and
 * dark themes. The on-screen keys are an exception: their pastel backgrounds are
 * fixed (theme-independent), so their letters use a fixed dark color. */

/* ---- Drill area ---- */
.drill {
  outline: none;
  margin-top: 1.5rem;
}

.drill-stats {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
}
.drill-stats .stat b {
  font-size: 1.35rem;
  color: var(--color-base-content);
}

.drill-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 1.6rem;
  line-height: 2.5rem;
  letter-spacing: 0.04em;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  background: var(--color-base-200);
  color: var(--color-base-content);
  user-select: none;
  white-space: pre-wrap;
  overflow-wrap: normal;
  min-height: 3rem;
}

/* Keep whole words on one line; wrapping happens only at the spaces between. */
.drill-text .word {
  white-space: nowrap;
}

.drill-text .ch {
  position: relative;
}
.drill-text .ch.pending {
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}
.drill-text .ch.correct {
  color: var(--color-success);
}
.drill-text .ch.error {
  color: var(--color-error);
  background: color-mix(in oklab, var(--color-error) 20%, transparent);
  border-radius: 2px;
}
.drill-text .ch.cursor {
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  border-left: 2px solid var(--color-primary);
  margin-left: -2px;
  animation: tt-blink 1s step-end infinite;
}
@keyframes tt-blink {
  50% {
    border-color: transparent;
  }
}

.last-result {
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--color-base-200);
  color: var(--color-base-content);
}
.last-result b {
  color: var(--color-success);
}
.last-result.result-pass {
  background: color-mix(in oklab, var(--color-success) 18%, transparent);
  color: var(--color-base-content);
}
.last-result.result-fail {
  background: color-mix(in oklab, var(--color-error) 16%, transparent);
  color: var(--color-base-content);
}

/* ---- Lessons list ---- */
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.6rem;
  background: var(--color-base-200);
}
.lesson.is-locked {
  opacity: 0.55;
}
.lesson.is-passed {
  border-color: color-mix(in oklab, var(--color-success) 45%, var(--color-base-300));
}
.lesson-main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}
.lesson-num {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--color-base-300);
  color: var(--color-base-content);
}
.lesson.is-passed .lesson-num {
  background: var(--color-success);
  color: var(--color-base-100);
}
.lesson-title {
  font-weight: 600;
  color: var(--color-base-content);
}
.lesson-meta {
  font-size: 0.85rem;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
.lesson-action {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}
.lesson-badge {
  font-size: 0.85rem;
  font-weight: 600;
}
.lesson-badge.pass {
  color: var(--color-success);
}
.lesson-badge.locked {
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

/* ---- On-screen keyboard ---- */
.keyboard {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  user-select: none;
}
.kb-row {
  display: flex;
  gap: 0.4rem;
}
.key {
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.22);
  font-family: ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  background: #ffffff;
  color: #1a1a1a; /* fixed dark: key backgrounds are always light */
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.key-space {
  min-width: 16rem;
  text-transform: lowercase;
  font-size: 0.8rem;
  color: #444;
}

/* Finger color-coding (light pastel tints; pair with the fixed dark letters above) */
.finger-lp { background: #ffc6d3; }
.finger-lr { background: #ffd9b8; }
.finger-lm { background: #fff0a6; }
.finger-li { background: #cdeeb0; }
.finger-ri { background: #b7e4f0; }
.finger-rm { background: #c3d2ff; }
.finger-rr { background: #ddc4f7; }
.finger-rp { background: #ffc1ec; }
.finger-thumb { background: #e2e6ea; }

.key.next {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
  font-weight: 800;
  z-index: 1;
}
.key.pressed {
  transform: translateY(1px) scale(0.96);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.keyboard.heatmap .key {
  cursor: default;
}

/* ---- Dashboard ---- */
.stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.stat-card {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-radius: 0.6rem;
  padding: 1rem 1.25rem;
  min-width: 7rem;
}
.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-base-content);
}
.stat-label {
  font-size: 0.85rem;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
.dash-h2 {
  margin-top: 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-base-content);
}
.dash-note {
  font-size: 0.85rem;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  margin-bottom: 0.5rem;
}
.chart {
  width: 100%;
  max-width: 640px;
  height: auto;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-radius: 0.6rem;
  margin-top: 0.5rem;
}
.chart-axis {
  stroke: color-mix(in oklab, var(--color-base-content) 25%, transparent);
  stroke-width: 1;
}
.chart-line {
  stroke-width: 2;
  fill: none;
}
.chart-wpm {
  stroke: var(--color-primary);
}
.chart-acc {
  stroke: var(--color-success);
}
.chart-legend {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}
.chart-legend .wpm::before {
  content: "\25A0  ";
  color: var(--color-primary);
}
.chart-legend .acc::before {
  content: "\25A0  ";
  color: var(--color-success);
}