/* MODERA 2026-10-09 | Responsive phone calculator inside the shared sticky header/ad layout.
   Avoid the old 245px fixed display + square-key overflow on short phones. */
#calculator.screen.active{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:calc(100dvh - var(--modera-header-h, 140px))!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  overflow:auto!important;
  background:#111827!important;
  overscroll-behavior:contain;
}
#calculator .calcApp{
  width:min(100%,480px)!important;
  max-width:480px!important;
  min-height:100%!important;
  height:100%!important;
  margin:0 auto!important;
  padding:clamp(8px,1.2dvh,14px) clamp(9px,3vw,20px) max(10px,env(safe-area-inset-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
  gap:clamp(5px,1dvh,10px)!important;
  background:#111827!important;
  color:white!important;
}
#calculator .calcTop{
  height:auto!important;
  flex:0 0 clamp(30px,4.8dvh,44px)!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  gap:4px!important;
  text-align:center;
  align-items:center;
  color:#e5e7eb;
  font-size:clamp(12px,2.4vw,16px)!important;
  font-weight:700;
}
#calculator .calcBack{font-size:clamp(11px,2.4vw,14px)!important;text-align:left;white-space:nowrap}
#calculator .calcDisplayBox{
  height:auto!important;
  flex:1 1 24%!important;
  min-height:50px!important;
  max-height:clamp(95px,27dvh,230px)!important;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  gap:5px;
  padding:6px 3px 8px!important;
  overflow:hidden!important;
  border-bottom:1px solid rgba(255,255,255,.13);
}
#calculator #calcExprText{
  width:100%;min-height:0!important;max-height:42%;overflow:auto;
  font-size:clamp(12px,2.5vw,17px)!important;color:#aeb6c3!important;
  line-height:1.2;text-align:right;overflow-wrap:anywhere;
}
#calculator #calcMainText{
  width:100%;max-height:80%;overflow:auto;
  font-size:clamp(30px,7.5dvh,65px)!important;line-height:1.06!important;
  letter-spacing:-.025em!important;overflow-wrap:anywhere;text-align:right;
  font-variant-numeric:tabular-nums;font-weight:400!important;
}
#calculator #calcMainText.calcLongNumber{font-size:clamp(24px,5.8dvh,44px)!important;letter-spacing:-.035em!important}
#calculator .calcButtons{
  flex:1 1 72%!important;
  min-height:0!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(5,minmax(0,1fr))!important;
  column-gap:clamp(5px,1.4vw,11px)!important;
  row-gap:clamp(5px,1dvh,11px)!important;
}
#calculator .calcBtn{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;height:100%!important;
  min-width:0!important;min-height:0!important;
  max-width:96px!important;justify-self:center!important;
  aspect-ratio:auto!important;
  padding:0!important;
  border-radius:clamp(13px,3.8vw,24px)!important;
  font-size:clamp(21px,4.4dvh,32px)!important;
  font-weight:550!important;
  line-height:1!important;
  touch-action:manipulation;
}
#calculator .calcOp{background:#bd8e31!important;color:#101827!important}
#calculator .calcUtil{background:#4b5563!important;color:#fff!important}
#calculator .calcBtn:focus-visible{outline:3px solid #e6c57c!important;outline-offset:-3px}
@media (max-height:620px){
  #calculator .calcApp{gap:5px!important;padding-top:5px!important;padding-bottom:6px!important}
  #calculator .calcTop{flex-basis:28px!important}
  #calculator .calcDisplayBox{flex:0 1 55px!important;min-height:45px!important;padding:3px 3px 6px!important}
  #calculator .calcBtn{border-radius:12px!important;font-size:clamp(18px,4.1dvh,25px)!important}
}
@media (min-width:768px){
  #calculator .calcApp{width:min(100%,440px)!important}
  #calculator .calcDisplayBox{max-height:210px!important}
  #calculator .calcBtn{max-width:100px!important}
}