/* Kimi K3 course — free-recall drill styles. Pairs with recall-drill.js. */

.drill {
  background: #fbfaf2;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
  transition: border-left-color 0.15s;
}

.dr-from {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.1rem 0.35rem;
  margin-bottom: 0.55rem;
}

.drill .q {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.9rem;
}

.drill .a {
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--ink-soft);
  border-left: 2px solid var(--vision);
  padding-left: 0.9rem;
  margin: 0.9rem 0 0;
}
.drill .a b, .drill .a strong { color: var(--ink); }
.drill .a code { font-size: 0.85em; }

.dr-hidden { display: none !important; }

.dr-commit {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--seq);
  background: var(--paper);
  border: 1px solid var(--seq);
  border-radius: 3px;
  padding: 0.42rem 0.8rem;
  cursor: pointer;
  transition: background 0.12s;
}
.dr-commit:hover { background: var(--seq-bg); }

.dr-scorer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule-soft);
}

.dr-sq {
  font-size: 0.83rem;
  color: var(--ink-faint);
  margin-right: 0.3rem;
  flex-basis: 100%;
  margin-bottom: 0.25rem;
}

.dr-scorer button {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.32rem 0.65rem;
  cursor: pointer;
  transition: all 0.12s;
}
.dr-scorer button:hover { border-color: var(--ink-soft); color: var(--ink); }

.dr-scorer button[data-s="got"].is-on  { background: var(--vision-bg); border-color: var(--vision); color: var(--vision); font-weight: 600; }
.dr-scorer button[data-s="part"].is-on { background: var(--depth-bg);  border-color: var(--depth);  color: var(--depth);  font-weight: 600; }
.dr-scorer button[data-s="miss"].is-on { background: var(--warn-bg);   border-color: var(--warn);   color: var(--warn);   font-weight: 600; }

.drill.scored-got  { border-left-color: var(--vision); }
.drill.scored-part { border-left-color: var(--depth);  }
.drill.scored-miss { border-left-color: var(--warn);   }

/* ─── Tally ────────────────────────────────────────────── */

.drill-tally {
  background: var(--seq-bg);
  border-radius: 3px;
  padding: 1.2rem 1.4rem;
  margin: 2.4rem 0;
}

.dt-head {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--seq);
  margin-bottom: 0.9rem;
}

.dt-bars { display: grid; gap: 0.5rem; }

.dt-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.8rem;
}

.dt-bar i {
  display: block;
  height: 0.45rem;
  width: 0;
  border-radius: 3px;
  background: var(--ink-faint);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 2px;
}
.dt-got  i { background: var(--vision); }
.dt-part i { background: var(--depth);  }
.dt-miss i { background: var(--warn);   }

.dt-bar span {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.dt-bar b { color: var(--ink); }

.dt-advice {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  min-height: 2.8em;
}

@media print {
  .drill { background: #fff; page-break-inside: avoid; }
  .dr-commit, .dr-scorer { display: none !important; }
  .drill .a { display: block !important; }
  .drill-tally { background: #fff; border: 1px solid var(--rule); }
  .dt-advice { min-height: 0; }
}