/* BatchMath IM1 on-screen answer keypad */
.bm-keypad{
  width:min(330px,100%);
  margin:8px auto 0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-auto-rows:minmax(40px,auto);
  gap:5px;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.bm-key{
  min-height:40px;
  padding:5px 3px;
  border:1px solid #3a3a3a;
  border-radius:8px;
  background:#151515;
  color:#fff;
  font:800 1.02rem/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  box-shadow:none;
}
.bm-key:hover,.bm-key:focus-visible{border-color:#f5c400;outline:none;background:#202020}
.bm-key:active{transform:translateY(1px)}
.bm-key.utility{color:#f5c400;font-size:.88rem}
.bm-key.symbol{color:#f5c400;font-size:1.18rem}
.bm-key.fraction-key{font-size:.88rem}
.bm-key.check-key{
  grid-column:5;
  grid-row:2 / span 2;
  background:#d71920;
  border-color:#d71920;
  color:#fff;
  font-size:.88rem;
  line-height:1.1;
}
.bm-key.check-key:hover,.bm-key.check-key:focus-visible{background:#ee222b;border-color:#ff4b50}
.bm-keypad .bm-spacer{visibility:hidden}
.bm-keypad.is-disabled{opacity:.45}
.bm-key:disabled{cursor:default;transform:none}
#answer.bm-keypad-input{margin-bottom:0}
.bm-keypad-touch #answer.bm-keypad-input{caret-color:transparent}
/* The check action lives inside the keypad once a keypad is present. */
.question-area.bm-has-keypad > #checkBtn{display:none}


/* Keep a consistent escape route visible during every active IM1 practice session. */
html.bm-practice-active .back,
html.bm-practice-active .batch-back{
  display:inline-block !important;
  margin:0 0 5px !important;
  color:#f5c400 !important;
  text-decoration:none !important;
  font-weight:800 !important;
  font-size:.82rem;
  line-height:1.05;
}

/* Compact active-practice layout for laptops/desktops. The setup screen keeps
   the normal page title and spacing; once practice begins, the actual math
   interaction moves to the top and is compressed enough to keep the problem,
   answer display, keypad, and worked feedback together in a typical laptop
   viewport. */
@media(min-width:721px){
  html.bm-practice-active .page{padding:7px 14px 12px}
  html.bm-practice-active .header{display:none}
  html.bm-practice-active #practiceCard.card{max-width:820px;margin:0 auto;padding:9px 14px 11px;border-radius:10px}
  html.bm-practice-active #practiceCard .stats{gap:5px;margin-bottom:5px}
  html.bm-practice-active #practiceCard .stat{padding:4px 5px;font-size:.78rem;line-height:1.05;border-radius:6px}
  html.bm-practice-active #practiceCard .stat span{display:inline;margin:0 0 0 4px;font-size:.88rem}
  html.bm-practice-active #practiceCard .question{margin:3px 0 6px;font-size:clamp(1.55rem,3vw,2.18rem);line-height:1.08}
  html.bm-practice-active #practiceCard .question.word{font-size:1rem;line-height:1.22;margin:2px auto 6px;max-width:760px}
  html.bm-practice-active #practiceCard .instruction{margin:0 auto 5px;font-size:.78rem;line-height:1.18}
  html.bm-practice-active #answer.bm-keypad-input{width:min(235px,100%);padding:5px 8px;font-size:1.12rem;line-height:1.05;border-radius:6px}
  html.bm-practice-active .bm-keypad{width:min(285px,100%);grid-auto-rows:32px;gap:3px;margin-top:4px}
  html.bm-practice-active .bm-key{min-height:32px;padding:2px;font-size:.88rem;border-radius:6px}
  html.bm-practice-active .bm-key.utility,
  html.bm-practice-active .bm-key.check-key{font-size:.72rem}
  html.bm-practice-active .bm-key.symbol{font-size:1rem}
  html.bm-practice-active #practiceCard .feedback{min-height:0;max-width:760px;margin:5px auto 0;font-size:.80rem;line-height:1.20}
  html.bm-practice-active #practiceCard .next{margin:5px auto 0;padding:6px 11px;font-size:.78rem;border-radius:6px}
}

@media(max-width:720px){
  /* On phones, let the keypad use more vertical space instead of compressing
     every key into a shallow strip at the top of the practice area. */
  .bm-keypad{width:min(330px,100%);grid-auto-rows:48px;gap:7px;margin-top:8px}
  .bm-key{min-height:48px;padding:5px 2px;font-size:1rem;border-radius:7px}
  .bm-key.utility,.bm-key.check-key{font-size:.78rem}
  .bm-key.symbol{font-size:1.12rem}

  /* During an active phone practice session, prioritize the actual problem over
     navigation/intro material. Setup and results still show the normal header. */
  html.bm-keypad-touch.bm-practice-active .page{padding:3px 5px 7px}
  html.bm-keypad-touch.bm-practice-active .header{display:none}
  html.bm-keypad-touch.bm-practice-active #practiceCard.card{padding:4px 6px 6px;margin:0;border-radius:7px}
  html.bm-keypad-touch.bm-practice-active #practiceCard .stats{gap:2px;margin-bottom:2px}
  html.bm-keypad-touch.bm-practice-active #practiceCard .stat{padding:2px 1px;font-size:.61rem;line-height:1.02;border-radius:5px}
  html.bm-keypad-touch.bm-practice-active #practiceCard .stat span{display:inline;margin:0 0 0 2px;font-size:.70rem}
  html.bm-keypad-touch.bm-practice-active #practiceCard .question{margin:1px 0 3px;font-size:clamp(1.10rem,5.2vw,1.48rem);line-height:1.04}
  html.bm-keypad-touch.bm-practice-active #practiceCard .question.word{font-size:.76rem;line-height:1.12;margin:1px auto 3px;max-width:100%}
  html.bm-keypad-touch.bm-practice-active #practiceCard .instruction{margin:0 auto 3px;font-size:.63rem;line-height:1.10}
  html.bm-keypad-touch.bm-practice-active #answer.bm-keypad-input{width:min(225px,100%);padding:3px 5px;font-size:.96rem;line-height:1.05;border-radius:5px}
  html.bm-keypad-touch.bm-practice-active #practiceCard .feedback{min-height:0;margin:3px auto 0;font-size:.69rem;line-height:1.13;max-width:100%}
  html.bm-keypad-touch.bm-practice-active #practiceCard .next{margin:3px auto 0;padding:4px 8px;font-size:.70rem;border-radius:5px}

  /* Once an answer has been checked, input is intentionally locked until Next.
     On phones the keypad is no longer useful at that point, so collapse it and
     give that vertical space directly to the worked explanation. */
  html.bm-keypad-touch.bm-practice-active .question-area.bm-answer-locked .bm-keypad{display:none}
  html.bm-keypad-touch.bm-practice-active .question-area.bm-answer-locked #answer.bm-keypad-input{padding:2px 4px;font-size:.86rem}
  html.bm-keypad-touch.bm-practice-active .question-area.bm-answer-locked .question{margin-bottom:2px}
}

/* Fraction-answer editor: the underlying input still stores parser-friendly n/d,
   while students see the same horizontal-bar fraction style used by Calculus. */
#answer.bm-fraction-source{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.bm-fraction-editor{
  width:min(300px,100%);min-height:50px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  padding:6px 10px;border:1px solid #f5c400;border-radius:8px;background:#050505;color:#fff;
  font:800 1.35rem/1.15 Arial,Helvetica,sans-serif;cursor:text;overflow-x:auto;white-space:nowrap;
}
.bm-fraction-editor:focus{outline:2px solid rgba(245,196,0,.35);outline-offset:1px}
.bm-fraction-editor.is-disabled{opacity:.62;cursor:default}
.bm-fraction-placeholder{color:#777;font-size:.72em;font-weight:600}
.bm-fraction-empty{color:#777;font-size:.72em;font-weight:600}
.bm-im1-frac{
  display:inline-grid;grid-template-rows:auto auto;vertical-align:middle;text-align:center;
  line-height:1.02;min-width:2.2em;
}
.bm-im1-frac-num{display:block;border-bottom:1.6px solid currentColor;padding:1px .35em 3px}
.bm-im1-frac-den{display:block;padding:3px .35em 1px}
.bm-im1-frac-num.active,.bm-im1-frac-den.active{background:#19150a;border-radius:4px}

@media(min-width:721px){
  html.bm-practice-active .bm-fraction-editor{width:min(235px,100%);min-height:40px;padding:3px 7px;font-size:1.08rem;border-radius:6px}
}
@media(max-width:720px){
  html.bm-keypad-touch.bm-practice-active .bm-fraction-editor{width:min(225px,100%);min-height:37px;padding:2px 5px;font-size:.96rem;border-radius:5px}
  html.bm-keypad-touch.bm-practice-active .question-area.bm-answer-locked .bm-fraction-editor{min-height:32px;padding:1px 4px;font-size:.86rem}
}

/* Dynamic algebra/equation engines share this keypad's fixed numeric grid. */
.bm-keypad.bm-unit2-keypad{width:min(360px,100%);grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bm-unit2-keypad .bm-key{min-width:0;min-height:44px;white-space:normal;overflow-wrap:normal;line-height:1.2;padding:7px 4px}
.bm-unit2-keypad .bm-key[aria-pressed="true"]{background:#f5c400;color:#030303}