/* ==========================================================================
   Bonjour & Beyond — drills.

   One overlay serves the flashcards, the conjugation drill and the quiz. It
   is sized for a Meet screen share rather than for a desk: one thing on
   screen, very large, and driveable with the space bar alone so a class is
   not watching a cursor hunt for buttons.
   ========================================================================== */

/* --- the launcher in the lesson ------------------------------------------ */
.drill-launch{margin:.2em 0 1.6em}
.drill-open{
  font:inherit;font-size:.82em;font-weight:800;cursor:pointer;
  padding:.5em 1.15em;border-radius:999px;
  color:var(--navy);background:var(--navy-soft);border:1px solid transparent;
  transition:background .15s,border-color .15s,transform .15s;
}
.drill-open::before{content:"\25B6";font-size:.62em;margin-right:.7em;vertical-align:.08em}
.drill-open:hover{background:var(--gold-soft);color:var(--gold);border-color:var(--gold)}
.drill-open:active{transform:scale(.97)}

/* --- the overlay --------------------------------------------------------- */
.drill{
  position:fixed;inset:0;z-index:90;display:flex;
  align-items:center;justify-content:center;padding:22px;
  background:rgba(12,20,36,.62);
}
.drill[hidden]{display:none}
.drill-card{
  display:flex;flex-direction:column;
  width:min(880px,94vw);max-height:88vh;
  background:var(--ground);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow-2);overflow:hidden;
  animation:drill-in .2s ease-out;
}
@keyframes drill-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}

.drill-head{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:14px 14px 14px 20px;border-bottom:1px solid var(--line);
  background:var(--surface);
}
.drill-kind{
  font-size:.72rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);
}
.drill-name{
  font-weight:800;color:var(--ink);margin-right:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.drill-count{font-size:.82rem;font-weight:800;color:var(--muted);white-space:nowrap}
.drill-x{
  flex:none;width:34px;height:34px;border-radius:999px;cursor:pointer;border:0;
  background:transparent;color:var(--muted);font-size:14px;line-height:1;
}
.drill-x:hover{background:var(--navy-soft);color:var(--ink)}

.drill-bar{flex:none;height:3px;background:var(--line)}
.drill-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s ease}

.drill-body{
  flex:1 1 auto;overflow:auto;min-height:0;
  padding:clamp(24px,4vw,54px) clamp(20px,4vw,48px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.35em;
}

/* --- card faces ---------------------------------------------------------- */
.card-side{
  margin:0;font-size:.74rem;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.card-front{
  margin:.1em 0;font-family:'Baloo Bhaijaan 2','Nunito',sans-serif;
  font-weight:800;line-height:1.15;color:var(--navy);
  font-size:calc(2.5rem * var(--scale));text-wrap:balance;
}
.card-back{
  margin:.25em 0 0;font-size:calc(1.5rem * var(--scale));
  font-weight:700;color:var(--ink);text-wrap:balance;
}
.card-note{
  margin:.5em 0 0;font-size:calc(.95rem * var(--scale));
  color:var(--muted);font-style:italic;max-width:44ch;
}
.card-hint{margin:1.1em 0 0;font-size:.86rem;color:var(--muted);font-weight:700}

/* --- conjugation --------------------------------------------------------- */
.drill-conj{border-collapse:collapse;font-size:calc(1.2rem * var(--scale))}
.drill-conj td{padding:.3em .9em;border-bottom:1px solid var(--line);text-align:left}
.drill-conj td:first-child{color:var(--muted);font-weight:700;white-space:nowrap}
.drill-conj td:last-child{color:var(--navy);font-weight:800;min-width:6em}
.drill-conj tr:last-child td{border-bottom:0}
.drill-conj .blank{
  display:inline-block;width:4.5em;border-bottom:2px dashed var(--line);
  vertical-align:.18em;
}

.drill-input{
  margin-top:.5em;width:min(15ch,80vw);
  font:inherit;font-family:'Baloo Bhaijaan 2','Nunito',sans-serif;
  font-size:calc(1.7rem * var(--scale));font-weight:800;text-align:center;
  padding:.18em .4em;border-radius:12px;
  border:2px solid var(--line);background:var(--surface);color:var(--ink);
}
.drill-input:focus{outline:0;border-color:var(--gold)}
/* Once checked, the box stops being an input and becomes the record of what
   you said, sitting right above what you should have said. */
.drill-input.is-right{border-color:#1F7A46;color:#1F7A46}
.drill-input.is-close{border-color:var(--gold);color:var(--gold)}
.drill-input.is-wrong{border-color:var(--red);color:var(--red)}
:root[data-theme="dark"] .drill-input.is-right{border-color:#67C58E;color:#67C58E}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .drill-input.is-right{border-color:#67C58E;color:#67C58E}
}

.drill-verdict{margin:.7em 0 0;font-size:calc(1.05rem * var(--scale));font-weight:800}
.drill-verdict.is-right{color:#1F7A46}
.drill-verdict.is-close{color:var(--gold)}
.drill-verdict.is-wrong{color:var(--red)}
:root[data-theme="dark"] .drill-verdict.is-right{color:#67C58E}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .drill-verdict.is-right{color:#67C58E}
}

/* --- quiz ---------------------------------------------------------------- */
.quiz-q{
  font-size:calc(1.35rem * var(--scale));font-weight:700;color:var(--ink);
  max-width:52ch;text-wrap:pretty;
}
.quiz-a{
  margin-top:1em;padding-top:1em;border-top:1px solid var(--line);
  font-size:calc(1.08rem * var(--scale));color:var(--muted);max-width:56ch;
}
.quiz-a strong{color:var(--navy)}
.quiz-a p{margin:.45em 0}
.quiz-q p{margin:0}

/* --- footer buttons ------------------------------------------------------ */
.drill-foot{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;flex:none;
  padding:16px;border-top:1px solid var(--line);background:var(--surface);
}
.drill-action{
  font:inherit;font-size:.94rem;font-weight:800;cursor:pointer;
  padding:.6em 1.3em;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  transition:transform .13s,border-color .15s,background .15s;
}
.drill-action:hover{transform:translateY(-1px);border-color:var(--navy)}
.drill-action:active{transform:none}
.drill-action.is-go{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.drill-action.is-go:hover{background:var(--navy)}
.drill-action.is-soft{color:var(--muted)}
.drill-action kbd{
  margin-left:.6em;font:inherit;font-size:.76em;font-weight:800;opacity:.75;
  border:1px solid currentColor;border-radius:.35em;padding:0 .35em;
}

/* Nothing behind the overlay should scroll while it is up. */
:root[data-drill="open"]{overflow:hidden}

@media (max-width:560px){
  .drill{padding:0}
  .drill-card{width:100vw;max-height:100vh;height:100vh;border-radius:0;border:0}
  .card-front{font-size:calc(2rem * var(--scale))}
}

@media (prefers-reduced-motion:reduce){
  .drill-card{animation:none}
  .drill-bar i{transition:none}
  .drill-open,.drill-action{transition:none}
  .drill-open:active,.drill-action:hover{transform:none}
}

@media print{
  .drill,.drill-launch{display:none !important}
}