/* Drill mode (lib/drill.js): the lesson frame without playback — no play/step/restart controls, no step bar —
   plus the start screen, the per-question timer and the result screen. Load after theme.css. */
#bPlay, #bBack, #bRestart, #segs, #stepName, #bCC, #bHelp { display: none; }
.dbar { flex: 1; min-width: 0; margin: 0 8px; color: var(--dim); font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Start and result screens lie over the picture, like a lesson's cover. */
.card.dscreen { background: rgba(11, 16, 24, .86); }
.card.still { animation: none; }
.dstart .dwrap { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding-bottom: 20px; }
.dstart .kicker { font-size: 22px; letter-spacing: .14em; text-transform: uppercase; }
.dtitle { margin: 4px 0 10px; font: 500 64px/1.15 "Iowan Old Style", Palatino, Georgia, serif; color: var(--chalk); }
.dintro { margin: 0 0 34px; max-width: 1100px; font-size: 26px; color: var(--dim); text-wrap: balance; }
.dlvls { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; max-width: 1440px; }
.dlvl { width: 260px; min-height: 176px; padding: 16px 18px; border-radius: 18px; border: 2px solid var(--edge); background: rgba(26, 36, 57, .7);
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--chalk); }
.dlvl:hover { border-color: var(--dim); }
.dlvl[aria-pressed="true"] { border-color: var(--quiz); background: rgba(134, 201, 232, .16); box-shadow: 0 0 0 3px rgba(134, 201, 232, .25); }
.dlvl .dn { font-size: 34px; font-weight: 700; color: var(--quiz); line-height: 1.1; }
.dlvl .dt { font-size: 25px; font-weight: 600; line-height: 1.2; }
.dlvl .ds { font-size: 21px; color: var(--dim); line-height: 1.25; }
.dlvl .db { margin-top: auto; padding-top: 6px; font-size: 19px; color: var(--good); }
.drow { display: flex; align-items: center; gap: 18px; margin: 30px 0 30px; }
.dlabel { font-size: 24px; color: var(--dim); }
.drow .opt { min-height: 50px; font-size: 22px; }
.drow .opt[aria-pressed="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--board); font-weight: 600; }
.dgo { font-size: 30px; padding: 16px 44px; }
.dstart .keys { margin-top: 18px; }

/* The timer: a thin bar along the bottom of the question card that runs out. */
.dclock { position: absolute; left: 22px; right: 22px; bottom: 9px; height: 5px; border-radius: 3px; background: rgba(236, 232, 220, .12); overflow: hidden; pointer-events: none; }
.dclock i { position: absolute; inset: 0; background: var(--task); transform-origin: left; animation: dclock linear forwards; }
.dclock.stopped i { animation-play-state: paused; opacity: .4; }
.dclock.waiting i { animation-play-state: paused; }   /* a listening question: the bar waits for the sounds */
@keyframes dclock { from { transform: scaleX(1); } to { transform: scaleX(0); background: var(--bad); } }

/* Result: the finish screen of a lesson, plus one dot per question (green = right on the first try). */
.dres .prompt { font-size: 50px; }
.ddots { display: flex; gap: 12px; justify-content: center; margin: 4px 0 18px; }
.ddots i { width: 22px; height: 22px; border-radius: 50%; background: var(--bad); opacity: .85; }
.ddots i.ok { background: var(--good); opacity: 1; }
.dres .fb { margin-top: 4px; }
.dres .dnew { color: var(--task); font-weight: 600; }
.dres .mascot { margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) { .dclock i { animation-name: none; } }

html.phone {
  /* The question card moves up to just under the keyboard, so a two-line answer still fits the picture. */
  & .card.band { top: 664px !important; padding-top: 14px; padding-bottom: 14px; }
  & .dbar { font-size: 15px; }
  & .card.dstart { padding-top: 24px; padding-bottom: 24px; }
  & .dstart .dwrap { padding-bottom: 0; }
  & .dtitle { font-size: 72px; margin: 0 0 4px; }
  & .dintro { font-size: 30px; margin-bottom: 22px; }
  & .dstart .kicker { font-size: 26px; }
  & .dlvls { flex-wrap: nowrap; gap: 12px; max-width: none; }   /* all five levels on one row */
  & .dlvl { width: 284px; min-height: 0; padding: 12px 10px; }
  & .dlvl .dn { font-size: 40px; }
  & .dlvl .dt { font-size: 31px; }
  & .dlvl .ds { font-size: 25px; }
  & .dlvl .db { font-size: 24px; }
  & .drow { margin: 22px 0; }
  & .dlabel { font-size: 30px; }
  & .drow .opt { font-size: 31px; min-height: 70px; }
  & .dgo { font-size: 40px; padding: 20px 56px; }
  & .dclock { height: 8px; }
  & .dres .prompt { font-size: 60px; }
  & .dres .fb { font-size: 32px; }
  & .ddots i { width: 30px; height: 30px; }
}

/* Embedded on the studio site (?embed=1): no link back to the book's contents, no language button (the host page sets
   ?lang), no home-screen hint (that is for the book as an app). */
html.embed #bHome, html.embed #bLang, html.embed .a2hs { display: none; }